|
起源：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
說(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)方法：
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
說(shuō)明：
IE6 和 IE7 都不支持 :after 這個(gè)偽類(lèi)，因此需要后面兩條來(lái)觸發(fā)IE6/7的haslayout，以清除浮動(dòng)。幸運(yùn)的是IE8支持 :after 偽類(lèi)。因此只需要針對(duì)IE6/7的hack了。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 清除浮動(dòng)新說(shuō) [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 清除浮動(dòng)新說(shuō) [1]
第 2 頁(yè) 
