万能清理浮动写法

 

CSS：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.clearfix { zoom: 1; }

.clear { clear: both; }

 

原 理：对于子元素浮动的元素，使用clearfix来清理。Firefox等标准浏览器以及IE8+支持：after属性，会使用 clearfix：after进行清理，对于IE6和7，不支持：after属性，会使用zoom属性来清理，且zoom属性只有IE系列可以识别，并且 IE8及之后浏览器使用zoom无法触发layout来实现清理。需要使用独立标签进行清理的话，使用clear来清理。

 

兼容所有浏览器