清華大佬耗費(fèi)三個(gè)月吐血整理的幾百G的資源，免費(fèi)分享！....>>>

對(duì)于日新月異的WEB開(kāi)發(fā)技術(shù)和瀏覽器更新頻率來(lái)說(shuō)，清除浮動(dòng)已然是一個(gè)被人嚼碎了的話題。說(shuō)是這些年過(guò)去了，有關(guān)float的地方，還依然少不了清除浮動(dòng)的標(biāo)簽和css代碼。W3C整天研究html5，就不能抽出點(diǎn)時(shí)間來(lái)把這種煩人的小細(xì)節(jié)修正一下嗎？抱怨歸抱怨，飯還得吃，錢(qián)還得掙，清除浮動(dòng)就不能停止。

為了清除浮動(dòng)增加無(wú)語(yǔ)義代碼已經(jīng)是最穩(wěn)定和簡(jiǎn)單的方式，但總叫開(kāi)發(fā)者心里感到不舒服，畢竟這么多年來(lái)早已習(xí)慣了結(jié)構(gòu)和樣式的分離，非要在結(jié)構(gòu)中插入這樣一行無(wú)語(yǔ)義代碼就會(huì)讓人覺(jué)得有種難以掌握的感受。

通過(guò)css代碼清除浮動(dòng)也不省油，光是當(dāng)前這種多個(gè)瀏覽器瓜分瀏覽器份額的狀況所帶來(lái)的各種css hack就夠讓人頭疼的了，而且這還沒(méi)說(shuō)到那些個(gè)瀏覽器的不同版本之間又有多少的差別。通過(guò)css清除浮動(dòng)還是一個(gè)長(zhǎng)期的過(guò)程，因?yàn)槟氵€要期盼下一牌瀏覽器沒(méi)有針對(duì)浮動(dòng)修改對(duì)html代碼的解釋。

要說(shuō)在當(dāng)前這種惡劣的狀況下，選取哪種方式去清除浮動(dòng)最為可取，這事一個(gè)人說(shuō)了不算，要看大家的意見(jiàn)。

很多時(shí)候，開(kāi)發(fā)人員在前端開(kāi)發(fā)時(shí)遇到問(wèn)題，就會(huì)去找那些運(yùn)用了類似技術(shù)的大型網(wǎng)站，去分析它們的解決方案，然后用到自己的網(wǎng)站上，連為什么都省得去想了。我也常常這么做。具體到清除浮動(dòng)這個(gè)問(wèn)題上，我現(xiàn)在所用的無(wú)語(yǔ)義標(biāo)簽法就是在看到某大型網(wǎng)站用過(guò)之后，我才選用的。

不過(guò)今天重提這個(gè)問(wèn)題，是因?yàn)槲矣衷谝粋€(gè)大型網(wǎng)站上看到了不同的方案。它們是這樣做的：

<style>
.clearfix:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: ".";
        clear: both;
        height: 0;
}

* html .clearfix{zoom: 1;}

*:first-child + html .clearfix{zoom: 1;}

</style>

<div style="border: 2px solid red;">
    <div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
        農(nóng)夫莊園
    </div>
</div>

雖說(shuō)這是來(lái)自大型網(wǎng)站，可信任度很高，可以不去思考而直接用，但學(xué)習(xí)的態(tài)度還是要有，就此分析一下其中的原理。

首先是利用:after偽類來(lái)兼容支持這一標(biāo)準(zhǔn)的瀏覽器們，F(xiàn)F、Chrome自然屬于強(qiáng)烈支持標(biāo)準(zhǔn)的瀏覽器行列，不過(guò)IE自從繁殖到第八代開(kāi)始，也表示支持這一偽類。:after偽類用來(lái)和content屬性一起使用設(shè)置在對(duì)象后的內(nèi)容。

如果現(xiàn)在不是2012年，而是10年后，可能就不用再往下講了。但因?yàn)楝F(xiàn)在IE6和IE7還很有勢(shì)力，所以，我們還得好好照顧它們。:after偽類IE不支持，它用來(lái)和content屬性一起使用設(shè)置在對(duì)象后的內(nèi)容，例如：

.clearfix:after {content:".";}

這個(gè)CSS將會(huì)讓clearfix類標(biāo)簽內(nèi)的文本后邊加上英文句號(hào)。

"* html"這個(gè)選擇符只有IE6才能識(shí)別，因此在其中設(shè)置縮放屬性"zoom: 1;"，便可實(shí)現(xiàn)兼容IE6；"*:first-child + html"這個(gè)選擇符只有IE7才能識(shí)別，因此設(shè)置縮放屬性"zoom: 1;" 便可實(shí)現(xiàn)兼容IE7。

原理分析完畢。方法是可行的，完美解決是不可能的。所以，W3C標(biāo)準(zhǔn)中的浮動(dòng)一天不變，清除浮動(dòng)就會(huì)一天不止。