CSS清除浮動(dòng)的方法有哪些呢？經(jīng)常性地會(huì)使用到float，很多邪門(mén)的事兒都有可能是浮動(dòng)在作怪，清除浮動(dòng)是必須要做的，而且隨時(shí)性地對(duì)父級(jí)元素清除浮動(dòng)的做法也被認(rèn)為是書(shū)寫(xiě)CSS的良好習(xí)慣之一。
下面看今天的教程，此為未清除浮動(dòng)源代碼，運(yùn)行代碼無(wú)法查看到父級(jí)元素淺黃色背景。

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

一、使用空標(biāo)簽清除浮動(dòng)

　　我用了很久的一種方法，空標(biāo)簽可以是div標(biāo)簽，也可以是P標(biāo)簽。我習(xí)慣用<div>，夠簡(jiǎn)短，也有很多人用<hr>，只是需要另外為其清除邊框，但理論上可以是任何標(biāo)簽。這種方式是在需要清除浮動(dòng)的父級(jí)元素內(nèi)部的所有浮動(dòng)元素后添加這樣一個(gè)標(biāo)簽清楚浮動(dòng)，并為其定義CSS代碼：clear:both。此方法的弊端在于增加了無(wú)意義的結(jié)構(gòu)元素。
<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>
    <div class=”clr”></div>
</div>

二、使用overflow屬性

　　此方法有效地解決了通過(guò)空標(biāo)簽元素清除浮動(dòng)而不得不增加無(wú)意代碼的弊端。使用該方法是只需在需要清除浮動(dòng)的元素中定義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偽對(duì)象清楚浮動(dòng)

　　該方法只適用于非IE瀏覽器。具體寫(xiě)法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置height:0，否則該元素會(huì)比實(shí)際高出若干像素；二、content屬性是必須的，但其值可以為空，藍(lán)色理想討論該方法的時(shí)候content屬性的值設(shè)為”.”，但我發(fā)現(xiàn)為空亦是可以的。

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