.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了。糖伴西红柿说：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;}
