如何清理浮动

     先说说浮动的情况， 在一个块容器里中的内容如果有浮动，那容器就会取不到里面内容的高度，而发生错位。这个时侯就需要清理浮动。

    <style>
    .box{border:1px solid red;}
    .next {border:1px solid green;}
    .fl{float:left;}
    .fr{float:right;}
　　 </style>
    <div class="box">
        <div class="fl">left</div>
        <div class="fr">right</div>
    </div>
    <div class="next">next</div>

     清理浮动的方法是在浮动内容后增加一个clear:both的定义

<div class="box">
    <div class="fl">left</div>
    <div class="fr">right</div>
    <div style="clear:both"></div>
</div>

     也可以添加一个类来实现之，这里通过伪类来实现,在不支持伪类的IE6下使用zoom:1来触发重新计算。

.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
.clearfix{zoom:1;}
<div class="box clearfix">
    <div class="fl">left</div>
    <div class="fr">right</div>
</div>

     嗯，下面这种方法也能清理浮动，原理是使用zoom:1或者任何可以触发IE下的hasLayout来解决浮动问题。overflow:hidden是给标准的浏览器用的。

.box{zoom:1  ;overflow:hidden;}