<div class='clear'></div>

但這樣增加了頁(yè)面的結(jié)構(gòu)的源代碼，造成代碼的擁腫，其實(shí)也可以有更好的辦法，
在浮動(dòng)元素的外包c(diǎn)learfix樣式


說(shuō)明：
*對(duì)大多數(shù)符合標(biāo)準(zhǔn)的瀏覽器應(yīng)用第一個(gè)聲明塊，目的是創(chuàng)建一個(gè)隱形的
內(nèi)容為空的塊來(lái)為目標(biāo)元素清除浮動(dòng)。
*第二條為clearfix應(yīng)用 inline-table 顯示屬性，僅僅針對(duì)IE/Mac。
*利用 * / 對(duì) IE/Mac 隱藏一些規(guī)則：
* height:1% 用來(lái)觸發(fā) IE6 下的haslayout。
*重新對(duì) IE/Mac 外的IE應(yīng)用 block 顯示屬性。
*最后一行用于結(jié)束針對(duì) IE/Mac 的hack。
由于此方法針對(duì)的瀏覽器或成為歷史（尤其是Mac下的IE5 ），或正在靠近
標(biāo)準(zhǔn)的路上，這個(gè)方法就不再那么與時(shí)俱進(jìn)了。
拋掉對(duì) IE/Mac 的支持之后，新的清除浮動(dòng)方法：


說(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 或者直接就寫成：


以我目前的淺薄認(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ì)被裁剪。

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


這種情況下，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 的遺忘。

最新評(píng)論