UI培訓(xùn)之清除浮動

我想大家在寫CSS的時候應(yīng)該都對清除浮動的用法深有體會，包括我在錄制視頻的時候，我也遇到一點疑惑。怎么才能把這里和學(xué)生講清楚。今天我們就還討論下clearfix的進化史吧。
clearfix清除浮動
首先在很多很多年以前我們常用的清除浮動是這樣的。

1. .clear{clear:both;line-height:0;}

現(xiàn)在可能還可以在很多老的站點上可以看到這樣的代碼，相當(dāng)暴力有效的解決浮動的問題。但是這個用法有一個致命傷，就是每次清除浮動的時候都需要增加一個空標簽來使用。
這種做法如果在頁面復(fù)雜的布局要經(jīng)常清楚浮動的時候就會產(chǎn)生很多的空標簽，增加了頁面無用標簽，不利于頁面優(yōu)化。但是我發(fā)現(xiàn)大型網(wǎng)站中 居然還在使用這種清楚浮動的方法。有興趣的同學(xué)可以上他們首頁搜索一下他們的.blank0這個樣式名稱。
 
因此有很多大神就研究出了 clearfix 清除浮動的方法，直接解決了上面的缺陷，不需要增加空標簽，直接在有浮動的外層加上這個樣式就可以了，這也是我們今天要討論的clearfix進化史。
起源
.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
              content: " "; 
              clear: both; 
             height: 0; 
} 
.clearfix { display: inline-table; } 
 
* html .clearfix { height: 1%; }//Hides from IE-mac 
.clearfix { display: block; }//End hide from IE-mac 
 
解釋一下以上的代碼：

• 對大多數(shù)符合標準的瀏覽器應(yīng)用第一個聲明塊，目的是創(chuàng)建一個隱形的內(nèi)容為空的塊來為目標元素清除浮動。
• 第二條為clearfix應(yīng)用 inline-table 顯示屬性，僅僅針對IE/Mac。利用 * 對 IE/Mac 隱藏一些規(guī)則：
• height:1% 用來觸發(fā) IE6 下的haslayout。
• 重新對 IE/Mac 外的IE應(yīng)用 block 顯示屬性。
• 最后一行用于結(jié)束針對 IE/Mac 的hack。（是不是覺得很坑爹，Mac下還有IE）

 
起源代碼可能也是很早期的時候了，再往后Mac下的IE5也發(fā)展到IE6了，各種瀏覽器開始向W3C這條標準慢慢靠齊了。所以就有了下面這個寫法出現(xiàn)了。
.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 */ 
 
IE6 和 IE7 都不支持 :after 這個偽類，因此需要后面兩條來觸發(fā)IE6/7的haslayout，以清除浮動。幸運的是IE8支持 :after 偽類。因此只需要針對IE6/7的hack了。
在一個有float 屬性元素的外層增加一個擁有clearfix屬性的div包裹，可以保證外部div的height，即清除"浮動元素脫離了文檔流，包圍圖片和文本的 div 不占據(jù)空間"的問題。

clearfix浮動

構(gòu)成Block Formatting Context的方法有下面幾種： 
    float的值不為none。 
    overflow的值不為visible。 
    display的值為table-cell, table-caption, inline-block中的任何一個。 
    position的值不為relative和static。 
很明顯，float和position不合適我們的需求。那只能從overflow或者display中選取一個。
 
因為是應(yīng)用了.clearfix和.menu的菜單極有可能是多級的，所以overflow: hidden或overflow: auto也不滿足需求（會把下拉的菜單隱藏掉或者出滾動條），那么只能從display下手。 
 
我們可以將.clearfix的display值設(shè)為table-cell, table-caption, inline-block中的任何一個
 
但是display: inline-block會產(chǎn)生多余空白，所以也排除掉。
 
剩下的只有table-cell, table-caption，為了保證兼容可以用display: table來使.clearfix形成一個Block Formatting Context
 
因為display: table會產(chǎn)生一些匿名盒子，這些匿名盒子的其中一個（display值為table-cell）會形成Block Formatting Context。這樣我們新的.clearfix就會閉合內(nèi)部元素的浮動。 
 
后面又有人對此進行了改良：

Jeff Starr 在這里針對IE6/7用了兩條語句來觸發(fā)haslayout。我在想作者為什么不直接用 * 來直接對 IE6/7 同時應(yīng)用 zoom:1 或者直接就寫成：
.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
.clearfix{*zoom:1;} 
 
但是對于很多同學(xué)這種優(yōu)化程度代碼還是不夠給力，clearfix 發(fā)展到現(xiàn)在的兩個終極版。
終極版一：
.clearfix:after { 
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {*zoom:1;}/*IE/7/6*/ 
 
解釋下:content:"\200B";這個參數(shù)，Unicode字符里有一個“零寬度空格”，即 U+200B，代替原來的“.”，可以縮減代碼量。而且不再使用visibility:hidden。
終極版二：
.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
    *zoom:1;/*IE/7/6*/ 
} 
其實說了這么多，很多人對.clearfix:before不是很理解，包括一開始我也不是很理解。到底我什么時候需要用before呢？為什么方案一沒有呢？其實它是用來處理margin邊距重疊的，由于內(nèi)部元素 float 創(chuàng)建了BFC，導(dǎo)致內(nèi)部元素的margin-top和 上一個盒子的margin-bottom 發(fā)生疊加。如果這不是你所希望的，那么就可以加上before，如果只是單純的閉合浮動，after就夠了！并不是如同大漠《Clear Float》一文所說的：但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug，這不是bug，是BFC應(yīng)該有的特性。
 
在實際開發(fā)中，改進方案一由于存在Unicode字符不適合內(nèi)嵌CSS的GB2312編碼的頁面，使用方案二完全可以解決我們的需求了。





本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://www.xamj520.com/ui