清除浮动的方法（float）

方式一：
额外标签法：给浮动的元素后面新增加一个清除浮动的盒子
例如：
<div style="float: left">浮动盒子</div>
<div style="float: left">浮动盒子</div>
<div style="clear: both">清除浮动盒子</div>  <!--新增清除浮动的标签-->

方式二：
给父元素添加overflow属性方法，给父级添加 overflow 为 hidden|auto|scroll都可以实现
例如：
<div style="overflow: hidden">
<div style="float: left">浮动盒子</div>
<div style="float: left">浮动盒子</div>
</div>

方式三：
使用 after 伪元素清除浮动，:after 方式为空元素的升级版，好处是不用单独添加标签
缺点：:after不支持IE6、7，可以使用zoom：1;
例如:
.clearfix:after{
content:"";
display:block;
clear:both;
}
.clearfix{
*zoom:1;  /* IE6、7专用清除浮动方法 */
}
<div class="clearfix">
<div style="float: left">浮动盒子</div>
<div style="float: left">浮动盒子</div>
</div>