CSS清除浮动的五种方式

浮动元素会影响整体的布局，但是有些情况又不得不让元素浮动来更好的构成页面，下面整理五种常用的清楚浮动的方法：

（注：为了节省时间，将方法写在了class名内，看懂即可）

1，为父元素添加高度：

<div>
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>
</div>

如上简写，只需给父元素设置height：200px即可

2，在最后添加一个清除浮动的div，但这个方法多写了一个标签，不推荐使用：

<div>
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>
    <div class="clear:both"></div>
</div>

3，给父元素加over-flow:hidden

<div>
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>0
</div>

给父元素加over-flowLhidden即可

4，伪类元素

<div class="clearfix">
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>0
</div>

css样式

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;

}

但是为了兼容IE6，IE7 要加上 .clearfix{zoom:1}

5，bootstrap框架封装好的清楚浮动的样式，除非用到了这个框架，不然以上四种就够用了

<div class="clearfix">
    <div class="float_left">左 height:200px</div>
    <div class="float_right">右 height:200px</div>0
</div>

应用此框架只需在父元素加上class="clearfix"即可，什么样式也不用写。