我们有时候会遇到当父盒子没有定义高度，其中嵌套的盒子浮动之后，下边的元素发生位置错误的情况。即：
<body>
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
.header,.main,.footer{
width:500px;
}
.header{
height:100px;
background:#bf4630;
}
.main{ /*没有main盒子设置高度*/
background:#eee;
margin:10px 0;
}
.right{
width:300px;
background:#ff2800;
height:300px;
float:left;
}
.left{
width:190px;
background:#ff5d40;
height:300px;
float:right;
}
.footer{
height:100px;
background:#bf4630;
}
这种情况最后会使得footer盒子向上移动被覆盖在main盒子的下面。所以我们往往需要通过clear这个属性来消除浮动带来的不利影响。
1、额外标签法—即在最后一个浮动元素后添加标签，我理解的是就是添加一个元素将footer盒子隔离开来。
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<!--额外标签法-->
<div style="clear:both;"></div>
</div>
<div class="footer"></div>
2、给父级元素使用overflow:hidden;，但是这个方法也有他固有的弊端，就是如果有内容超出了盒子，会使得超出的部分隐藏起来，所以这个方法只能在内容在盒子内部的时候使用。
.main{
background:#eee;
margin:10px 0;
overflow:hidden; /*一定要注意是给父级元素使用该方法*/
}
以上的两种方法都能解决问题，但是都有其弊端，我们最推荐的是下面这一种。
3、伪元素清除浮动
.clearfix:after{
content:".";
display:block;
height:0;
line-height:0;
visibility:hidden;
clear:both;
}
/*兼容IE浏览器*/
.clearfix{
zoom:1;
}
<body>
<div class="header"></div>
<div class="main clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
它的好处就是写一次即可，之后可以无限调用，弥补了第一个方法的不足。
