我想大家在寫css的時候應該都對清除浮動的用法深有體會，今天我們就還討論下clearfix的進化史吧。
首先在很多很多年以前我們常用的清除浮動是這樣的。
.clear
現在可能還可以在很多老的站點上可以看到這樣的**，相當暴力有效的解決浮動的問題。但是這個用法有乙個致命傷，就是每次清除浮動的時候都需要增加乙個空標籤來使用。
這種做法如果在頁面複雜的布局要經常清楚浮動的時候就會產生很多的空標籤，增加了頁面無用標籤，不利於頁面優化。但是我發現大型**中 居然還在使用這種清楚浮動的方法。有興趣的同學可以上他們首頁搜尋一下他們的.blank0這個樣式名稱。
因此有很多大神就研究出了 clearfix 清除浮動的方法，直接解決了上面的缺陷，不需要增加空標籤，直接在有浮動的外層加上這個樣式就可以了，這也是我們今天要討論的clearfix進化史。
起源
.clearfix:after .clearfix * html .clearfix //hides from ie-mac.clearfix //end hide from ie-mac
解釋一下以上的**：
起源**可能也是很早期的時候了，再往後mac下的ie5也發展到ie6了，各種瀏覽器開始向w3c這條標準慢慢靠齊了。所以就有了下面這個寫法出現了。
.clearfix:after * html .clearfix /*ie6
*/*:first-child+html .clearfix /*
ie7
*/
ie6 和 ie7 都不支援 :after 這個偽類，因此需要後面兩條來觸發ie6/7的haslayout，以清除浮動。幸運的是ie8支援 :after 偽類。因此只需要針對ie6/7的hack了。
在乙個有float 屬性元素的外層增加乙個擁有clearfix屬性的div包裹，可以保證外部div的height，即清除"浮動元素脫離了文件流，包圍和文字的 div 不佔據空間"的問題。
jeff starr 在這裡針對ie6/7用了兩條語句來觸發haslayout。我在想作者為什麼不直接用 * 來直接對 ie6/7 同時應用 zoom:1 或者直接就寫成：
.clearfix:after .clearfix
但是對於很多同學這種優化程度**還是不夠給力，clearfix 發展到現在的兩個終極版。
構成block formatting context的方法有下面幾種：
float的值不為none。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block中的任何乙個。
position的值不為relative和static。
很明顯，float和position不合適我們的需求。那只能從overflow或者display中選取乙個。
因為是應用了.clearfix和.menu的選單極有可能是多級的，所以overflow: hidden或overflow: auto也不滿足需求
（會把下拉的選單隱藏掉或者出滾動條），那麼只能從display下手。
我們可以將.clearfix的display值設為table-cell, table-caption, inline-block中的任何乙個
但是display: inline-block會產生多餘空白，所以也排除掉。
剩下的只有table-cell, table-caption，為了保證相容可以用display: table來使.clearfix形成乙個block formatting context
因為display: table會產生一些匿名盒子，這些匿名盒子的其中乙個（display值為table-cell）會形成block formatting context。
這樣我們新的.clearfix就會閉合內部元素的浮動。
後面又有人對此進行了改良：
終極版一：
.clearfix:after .clearfix /*ie/7/6
*/
解釋下:content:"\200b";這個引數，unicode字元裡有乙個「零寬度空格」，即 u+200b，代替原來的「.」，可以縮減**量。而且不再使用visibility:hidden。
終極版二：
.clearfix:before,.clearfix:after.clearfix:after.clearfix
這兩個終極版**都很簡潔，終極版一和二都可以使用，以上**都經過測試，大家趕緊用一下吧，如果有什麼問題請及時跟我反饋，如果你還停留在clearfix的老**的時候就趕緊更新一下**吧。
clearfix清除浮動進化史
首先在很多很多年以前我們常用的清除浮動是這樣的。1 clear 現在可能還可以在很多老的站點上可以看到這樣的 相當暴力有效的解決浮動的問題。但是這個用法有乙個致命傷，就是每次清除浮動的時候都需要增加乙個空標籤來使用。這種做法如果在頁面複雜的布局要經常清楚浮動的時候就會產生很多的空標籤，增加了頁面無用...
clearfix清除浮動進化史
首先在很多很多年以前我們常用的清除浮動是這樣的。1.clear 現在可能還可以在很多老的站點上可以看到這樣的 相當暴力有效的解決浮動的問題。但是這個用法有乙個致命傷，就是每次清除浮動的時候都需要增加乙個空標籤來使用。這種做法如果在頁面複雜的布局要經常清楚浮動的時候就會產生很多的空標籤，增加了頁面無用...
清除浮動（clearfix）
web前端 2008 12 07 15 52 02 閱讀1089 字型大小 大 中小訂閱 在寫html 的時候，發現在firefox等符合w3c標準的瀏覽器中，如果有乙個div作為外部容器，內部的div如果設定了float樣式，則外部的容器div因為內部沒有clear，導致不能被撐開。看下面的例子 ...