不增加额外元素实现清除浮动( 闭合浮动元素 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 即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>