clearfix清除浮動進化史

我想你們在寫CSS的時候應該都對清除浮動的用法深有體會，今天咱們就還討論下clearfix的進化史吧。

首先在不少不少年之前咱們經常使用的清除浮動是這樣的。

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

如今可能還能夠在不少老的站點上能夠看到這樣的代碼，至關暴力有效的解決浮動的問題。可是這個用法有一個致命傷，就是每次清除浮動的時候都須要增長一個空標籤來使用。

<p class="clear"></p>

這種作法若是在頁面複雜的佈局要常常清楚浮動的時候就會產生不少的空標籤，增長了頁面無用標籤，不利於頁面優化。可是我發現大型網站中 竟然還在使用這種清楚浮動的方法。有興趣的同窗能夠上他們首頁搜索一下他們的**.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

解釋一下以上的代碼：

• 對大多數符合標準的瀏覽器應用第一個聲明塊，目的是建立一個隱形的內容爲空的塊來爲目標元素清除浮動。
• 第二條爲clearfix應用 inline-table 顯示屬性，僅僅針對IE/Mac。利用 * 對 IE/Mac 隱藏一些規則：
• height:1% 用來觸發 IE6 下的haslayout。
• 從新對 IE/Mac 外的IE應用 block 顯示屬性。
• 最後一行用於結束針對 IE/Mac 的hack。（是否是以爲很坑爹，Mac下還有IE）

起源代碼可能也是很早期的時候了，再日後Mac下的IE5也發展到IE6了，各類瀏覽器開始向W3C這條標準慢慢靠齊了。因此就有了下面這個寫法出現了。

.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 這個僞類，所以須要後面兩條來觸發IE6/7的haslayout，以清除浮動。幸運的是IE8支持 :after 僞類。所以只須要針對IE6/7的hack了。

後面又有人對此進行了改良： Jeff Starr 在這裏針對IE6/7用了兩條語句來觸發haslayout。我在想做者爲何不直接用 * 來直接對 IE6/7 同時應用 zoom:1 或者直接就寫成：

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix{*zoom:1;}

我塞！是否是簡潔了很是多，給力。

可是對於不少同窗這種優化程度代碼仍是不夠給力，clearfix 發展到如今的兩個終極版。

##終極版一：

.clearfix:after {
    content:"\200B";
    display:block;
    height:0;
    clear:both;
}
.clearfix {*zoom:1;}/*IE/7/6*/

解釋下:content:"\200B";這個參數，Unicode字符裏有一個「零寬度空格」，即 U+200B，代替原來的「.」，能夠縮減代碼量。並且再也不使用visibility:hidden。

##終極版二：

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}

這兩個終極版代碼都很簡潔，終極版一和二均可以使用，以上代碼都通過測試，你們趕忙用一下吧，若是有什麼問題請及時跟我反饋，若是你還停留在clearfix的老代碼的時候就趕忙更新一下代碼吧。