武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：CSS網(wǎng)頁(yè)制作:浮動(dòng)清除的新方法。

起源：

html %

說(shuō)明：

由于此方法針對(duì)的瀏覽器或成為歷史（尤其是Mac下的IE5 ），或正在靠近
標(biāo)準(zhǔn)的路上，這個(gè)方法就不再那么與時(shí)俱進(jìn)了。

拋掉對(duì) IE/Mac 的支持之后，新的清除浮動(dòng)方法：

html .clearfix             html

說(shuō)明：

IE6 和 IE7 都不支持 :after 這個(gè)偽類，因此需要后面兩條來(lái)觸發(fā)IE6/7的haslayout，以清除浮動(dòng)。幸運(yùn)的是IE8支持 :after 偽類。因此只需要針對(duì)IE6/7的hack了。

糖伴西紅柿說(shuō)：
Jeff Starr 在這里針對(duì)IE6/7用了兩條語(yǔ)句來(lái)觸發(fā)haslayout。我在想作者為什么不直接用 * 來(lái)直接對(duì) IE6/7 同時(shí)應(yīng)用 zoom:1 或者直接就寫成：

zoom

以我目前的淺薄認(rèn)知來(lái)講，以上寫法應(yīng)該也可以直接達(dá)到同樣效果。關(guān)于這個(gè)地方，在文章的評(píng)論里也有些討論，我希望再聽(tīng)聽(tīng)大家的高見(jiàn)。

我平時(shí)都是用 overflow:hidden 來(lái)清除浮動(dòng)的，因?yàn)閴蚝?jiǎn)單粗暴。但是 overflow 有時(shí)候也不太適用：

父級(jí)元素使用 overflow:hidden 時(shí)，如果其子元素定位到部分或全部在父元素之外，父元素就會(huì)對(duì)超出其外的子元素部分進(jìn)行裁剪。

對(duì) css3 來(lái)說(shuō)，也會(huì) overflow:hidden 也會(huì)對(duì)一些屬性產(chǎn)生影響。
例如 box-shadow, 當(dāng)父元素使用 overflow:hidden 屬性時(shí)，box-shadow 會(huì)被裁剪。

其他可能被影響的元素如 text-shadow 和 transform。可以參考 Andy Ford 的 demo

對(duì)于那些不愿意再給標(biāo)簽添加額外的 clearfix 類來(lái)清除浮動(dòng)的人來(lái)說(shuō)，直接將需要清除浮動(dòng)的元素添加進(jìn)清除浮動(dòng)代碼塊這個(gè)組也是一個(gè)辦法。

afterzoom

這種情況下，html 和 css 文件就像一個(gè)蹺蹺板的兩頭。html 代碼倒是整潔了，css 代碼卻出現(xiàn)了一定的繁冗。而且一旦專題頁(yè)面過(guò)長(zhǎng)，或者在項(xiàng)目中使用，用這個(gè)清除組的方式反而會(huì)不勝其擾。

歸結(jié)下來(lái)，還是得看個(gè)人、項(xiàng)目的權(quán)衡選擇.雖然我一直用簡(jiǎn)單粗暴的overflow:hidden，但是現(xiàn)在更傾向于使用 clearfix，感覺(jué)這種一體化的東西更靠譜，能避免偶爾對(duì) zoom 的遺忘。

成熟的東西穩(wěn)定性好，但是會(huì)比較復(fù)雜、厚重;簡(jiǎn)單的靈活性好，但是過(guò)于零散、隨意，沒(méi)有組織性，還沒(méi)那么穩(wěn)定.權(quán)衡決定到底要使用那種方法，有時(shí)候反而比問(wèn)題本身還讓人頭疼.

我個(gè)人的想法是沒(méi)有好與壞的區(qū)別，只有合適不合適的區(qū)別。但是我們一直都受困于所受的教育，什么問(wèn)題都有標(biāo)準(zhǔn)答案，非對(duì)即錯(cuò)，非好即壞。經(jīng)常可見(jiàn)對(duì)一些工具的討論，都是奔著爭(zhēng)出個(gè)誰(shuí)好誰(shuí)壞而去的，例如 jQuery mootools YUI.相比起到底是好誰(shuí)壞，我們還是最好趕緊轉(zhuǎn)變思想，摒棄”一刀切”的思想吧。

最后，關(guān)于為什么要采用一下這種復(fù)雜方式來(lái)針對(duì)IE6/7，而不采用其他稍微簡(jiǎn)潔的方式，還希望大家給我指點(diǎn)下迷津。

html

Reference: