CSS清除浮動常用方法小結 CSS clear both {overflow:auto;zoom:1;}

常用的清除浮動的方法有以下三種:

此為未清除浮動源代碼，運作代碼無法檢視到父級元素淺黃色背景。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>      

三種清除浮動方法如下：

1、使用空标簽清除浮動。我用了很久的一種方法，空标簽可以是div标簽，也可以是P标簽。我習慣用<P>，夠簡短，也有很多人用<hr>，隻是需要另外 為其清除邊框，但理論上可以是任何标簽。這種方式是在需要清除浮動的父級元素内部的所有浮動元素後添加這樣一個标簽清除浮動，并為其定義CSS代 碼：clear:both。此方法的弊端在于增加了無意義的結構元素。

對于使用額外标簽清除浮動（閉合浮動元素），是W3C推薦的 做法。至于使用<br />元素還是空<div></div>可以根據自己的喜好來選（當然你也可以使用其它塊級元素）。不過要注意的 是，<br />本身是有表現的，它會多出一個換行出來，是以要設定它的heigh為0，以隐藏它的表現。是以大多數情況下使用空<div>比較合 适。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<p class=”clr”> </p>
</div>      

2、使用overflow屬性。此方法有效地解決了通過空标簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是隻需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可！”zoom:1″用于相容IE6,也可以用width:100%。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }/* overflow:auto可以換成overflow:hidden，zoom:1可以換成width:100%*/
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>      

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>