清除浮动小结

日常工作中常用，常见.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 */

说明：

1、对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
2、第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。
3、利用 * / 对 IE/Mac 隐藏一些规则：height:1% 用来触发 IE6 下的haslayout。
4、重新对 IE/Mac 外的IE应用 block 显示属性。
5、最后一行用于结束针对 IE/Mac 的hack。

针对的Mac下的IE5更早浏览器

针对 IE/Mac 的支持之后浏览器版本，新的清除浮动方法：

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { *zoom: 1; } /* IE6/IE7 */
 

说明：

IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。