最佳的 清楚浮动 clearfix

关于clearfix清除浮动

 

 

起源：

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.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下的IE5 ），或正在靠近
标准的路上，这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后，新的清除浮动方法：

/* new clearfix */
.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了。