css 兩種清除浮動經典執行個體代碼

一、使用空標籤清除浮動
<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”>
</div>

空標籤可以是div標籤，也可以是p標籤。我習慣用<p>，夠簡短，也有很多人用<hr>，只是需要另外為其清除邊框，但理論上可以是任何標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後添加這樣一個標籤清楚浮動，並為其定義css代碼：clear:both。此方法的弊端在於增加了無意義的結構元

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