如何清理浮动
文章来源：365jz.com 点击数：266 更新时间：2011-03-21 17:37 参与评论
先说说浮动的情况， 在一个块容器里中的内容如果有浮动，那容器就会取不到里面内容的高度，而发生错位。这个时侯就需要清理浮动。
<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>
嗯，下面这种方法也能清理浮动，原理是设定宽度和overflow来重新触发容器的计算。
.box{width:500px;overflow:hidden;}
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
