不增加额外元素实现清除浮动( 闭合浮动元素 Clear Floats )

浮动(Float)是页面布局中经常用到的技巧,但是,同时也出现了很多由于浮动引发的问题;父元素不能闭合具有浮动属性的子元素,是这些问题中最常见且最让新手头痛的一个。

清除浮动常见的做法是加一个额外的标签,然后给这个标签加上 clear:both 的设置,追求完美的人当然不乐意这种方式,于是,便有了本文将要介绍的:不增加额外元素实现清除浮动的方法。

 
<style type="text/css">
 
/*
说明:不增加额外元素实现清除浮动( 闭合浮动元素 Clear Floats )
整理: CodeBit.cn ( http://www.CodeBit.cn )
*/
 
.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 即可。