這篇文章主要介紹了CSS中使用clearfix清除浮動的方法,作者列出了幾個clearfix的不同的使用方法進行對比,需要的朋友可以參考下
首先在很多很多年以前我們常用的清除浮動是這樣的。
CSS Code復制內容到剪貼板
- .clear{clear:both;line-height:0;}
現在可能還可以在很多老的站點上可以看到這樣的代碼，相當暴力有效的解決浮動的問題。但是這個用法有一個致命傷，就是每次清除浮動的時候都需要增加一個空標簽來使用。
這種做法如果在頁面復雜的布局要經常清楚浮動的時候就會產生很多的空標簽，增加了頁面無用標簽，不利於頁面優化。但是我發現大型網站中 居然還在使用這種清楚浮動的方法。有興趣的同學可以上他們首頁搜索一下他們的.blank0這個樣式名稱。
因此有很多大神就研究出了 clearfix 清除浮動的方法，直接解決了上面的缺陷，不需要增加空標簽，直接在有浮動的外層加上這個樣式就可以了，這也是我們今天要討論的clearfix進化史。
起源
CSS Code復制內容到剪貼板
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- .clearfix { display: inline-table; }
-
- * Html .clearfix { height: 1%; }//Hides <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=3fdf214c8ec2a5ea&k=from&k0=from&kdi0=0&luki=1&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=eaa5c28e4c21df3f&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2EHtml&urlid=0" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">from</span></a></span> 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這條標准慢慢靠齊了。所以就有了下面這個寫法出現了。
CSS Code復制內容到剪貼板
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- * <span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=3fdf214c8ec2a5ea&k=html&k0=html&kdi0=0&luki=5&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=eaa5c28e4c21df3f&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2EHtml&urlid=0" id="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">Html</span></a></span> .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 不占據空間"的問題。
Jeff Starr 在這裡針對IE6/7用了兩條語句來觸發haslayout。我在想作者為什麼不直接用 * 來直接對 IE6/7 同時應用 zoom:1 或者直接就寫成：
CSS Code復制內容到剪貼板
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- .clearfix{*zoom:1;}
但是對於很多同學這種優化程度代碼還是不夠給力，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就會閉合內部元素的浮動。
後面又有人對此進行了改良：
終極版一：
CSS Code復制內容到剪貼板
- .clearfix:after {
- content:"\200B";
- display:<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="text-decoration: none;" mpid="2" target="_blank" href="http://cpro.baidu.com/cpro/ui/uiJS.PHP?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=3fdf214c8ec2a5ea&k=block&k0=block&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=eaa5c28e4c21df3f&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2EHtml&urlid=0" id="2_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;
- height:0;
- clear:both;
- }
- .clearfix {*zoom:1;}/*IE/7/6*/
解釋下:content:"\200B";這個參數，Unicode字符裡有一個“零寬度空格”，即 U+200B，代替原來的“.”，可以縮減代碼量。而且不再使用visibility:hidden。
終極版二：
CSS Code復制內容到剪貼板
- .clearfix:before,.clearfix:after{
- content:"";
- display:table;
- }
- .clearfix:after{clear:both;}
- .clearfix{
- *zoom:1;/*IE/7/6*/
- }
這兩個終極版代碼都很簡潔，終極版一和二都可以使用，以上代碼都經過測試，大家趕緊用一下吧，如果有什麼問題請及時跟我反饋，如果你還停留在clearfix的老代碼的時候就趕緊更新一下代碼吧。