清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
<style>
.big{
width: 100%;
height: auto;
background: sandybrown;
}
.a{
float: left;
width: 100px;
height: 100px;
background: aqua;
}
.b{
float: left;
width: 200px;
height: 200px;
background: palegreen;
}
.c{
float: left;
width: 300px;
height: 300px;
background: paleturquoise;
}
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来
</style>
额外标签(不推荐)
<div class="big">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div style="clear: both;"></div>
</div>
触发父级BFC
<div class="big" style="overflow: hidden;">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
单伪类处理(推荐)
<style type="text/css">
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
*zoom: 1;
}
</style>
<div class="big clearfix">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
双伪类
<style type="text/css">
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
</style>
<div class="big clearfix">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
