CSS技术二之clearfix-清除浮动

在设计中常常会遇到这样的问题:
当容器内部有float样式时,容器的高度不会被撑开。

下面介绍两种方法解决上面的问题

第一种:在浮动元素后面加一个clear: both;比较常见的方法。


缺点:兼容性不强,IE6下div.clear会有高度,需要height:0,overflow:hidden来解决;页面有冗余代码。
第二种方法:clearfix;最完美的解决方法。

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

用法:在浮动外的容器上加一个clearfix类。

发表评论

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