清除浮动的几种方法

清除浮动的几种方法

CSS样式布局是困扰初学者的一个问题，以下针对这个问题列出一些解决的方法，欢迎交流讨论。contact me

方式一

在文档的后面加空标签

<div style="clear: both;"></div>

此种方法会增加无语义的空标签，不利于后期的维护，不推荐使用。

方式二

为父级元素添加overflow属性，会使浮动元素回到容器中

.container{
	overflow: auto/hidden;
}

方式三

父级元素也伴随浮动，例如float: left;。但此种方法等于用新的问题掩盖了旧的问题，不推荐使用。

方式四

也是比较常用的一种方法，增加空的块状元素并隐藏，如下：

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

设置zoom: 1;是为了让IE7,IE8触发haslayout属性。 方式四和方式一相似，都是为了让浮动元素回到容器之中。综合来说就是为了触发BFC(block formating content)，以此来达到清除浮动的效果。以下一些属性都有触发效果：float, overflow, display: table-cell/table-caption/inline/block, position: fixed/absolute;

方式五

这是一种简化的方案，推荐使用。

.clearfix:after,
.clearfix:before{
	display: table;
	cotent: ".";
}
.clearfix:after{
	clear: both;
}

.clearfix:before是为了防止margin-top和margin-bottom重叠

Stay foolish, stay hungary.

• ← Previous Post
• Next Post →