clearfix清除浮動進化史

文章轉載自：愛思資源網http://www.aseoe.com/show-10-192-1.html

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

clearfix清除浮動

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

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

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

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

在一個有float 屬性元素的外層增長一個擁有clearfix屬性的div包裹，能夠保證外部div的height，即清除"浮動元素脫離了文檔流，包圍圖片和文本的 div 不佔據空間"的問題。

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就會閉合內部元素的浮動。 

 

後面又有人對此進行了改良：

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的老代碼的時候就趕忙更新一下代碼吧。