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"即可，什么样式也不用写。