一、使用空標籤清除浮動
我用了很久的一種方法，空標籤可以是div標籤，也可以是P標籤。我習慣用<div>，夠簡短，也有很多人
用<hr>，只是需要另外爲其清除邊框，但理論上可以是任何標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後添加這樣一個標籤
清楚浮動，併爲其定義CSS代碼：clear:both。此方法的弊端在於增加了無意義的結構元素。另外，由於ie中，div有個默認高度，爲了在所有瀏覽器下顯示效果是一樣的，還應該讓清除浮動的div高度爲0。
<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;hight:0; overflow:hidden;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<div class=”clr”></div>
</div>
二、使用overflow屬性
此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意代碼的弊端。使用該方法是隻需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可！”zoom:1″用於兼容IE6。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#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>
三、使用after僞對象清楚浮動
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須爲需要清除浮動元素的僞對象中設置 height:0，否則該元素會比實際高出若干像素；二、content屬性是必須的，但其值可以爲空，藍色理想討論該方法的時候content屬性的值 設爲”.”，但我發現爲空亦是可以的。
<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>
此三種方法各有利弊，使用時應擇優選擇，比較之下第二種方法更爲可取 。