如何清理浮動
文章來源：365jz.com 點擊數：275 更新時間：2011-03-21 17:37 參與評論
先說說浮動的情況， 在一個塊容器里中的內容如果有浮動，那容器就會取不到里面內容的高度，而發(fā)生錯位。這個時侯就需要清理浮動。
<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來觸發(fā)重新計算。
.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來重新觸發(fā)容器的計算。
.box{width:500px;overflow:hidden;}
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網友會為你解答！！ 點擊進入論壇
------分隔線----------------------------
