不使用多余标签清除浮动的方法

俗话说的好,凡事有利必有弊,浮动是div+css布局最常用到的技巧但同时又是引发页面问题的最常见的原因,例如父元素不能闭合具有浮动属性的子元素,是这些问题中最常见且最让人头痛的一个。通常清除浮动最常用的一个方法是添加一个标签并令其“clear:both”,这里介绍的是不增加这种额外的标签而实现清除浮动。

<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
</style>

用法是在需要清除浮动的标签上增加一个clearfix的class。