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的老代码的时候就赶忙更新一下代码吧。