如何清理浮动

时间：2011-03-21 来源：一只IT迷途小羔羊

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

    <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>