学习整理：CSS中清除浮动的4种方法

CSS中清除浮动的4种方法

为什么要清除浮动

在CSS中，为了要让不同盒子在标准流下同一行显示，需要让盒子带上浮动属性。在实际开发中，例如文章区域和购物平台的商品显示区域，由于其中内容（也就是子盒子）数量不定，随时变化，需要让父盒子不指定高度。这样父盒子的高度会随子盒子的数量变化而变化。然而将子盒子加上浮动属性之后，由于父盒子高度为0，父盒子下方的内容会直接跑上来，显示在子盒子下方。为了解决这个问题，我们需要让父盒子清除浮动，以防下方内容跑到上面来。

1.额外标签法

在子盒子最后一行代码下面额外添加一行新的块级标签，使用类中的clear属性进行清除。

//clear类
.clear {
	clear: both;
}
//代码实现:
//上面是子盒子的代码
<div class="clear"></div>

**注意：**这种方法虽然简单、易操作，但是添加了无意义的代码，让结构性变差。实际开发中不推荐使用。

2.给父盒子的类中添加overflow属性

使用类中的overflow属性进行清除浮动。

//父盒子的类
.box1 {
	overflow: hidden;
}

.box2 {
	overflow: auto;
}

.box3 {
	overflow: scroll;
}

以上的三种代码都能实现浮动清除。
**注意：**这种方法虽然简单，但是会使子盒子中超出父盒子范围的部分显示不出来。实际开发中不推荐使用。

3.after伪元素法

通过给父盒子添加clearfix属性来清除浮动。

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}
//IE6、7的方法
.clearfix {
	*zoom: 1;
}

此方法结构简单，但对低版本的浏览器支持不好。在开发中大多采用此方法。

4.双为元素清除浮动法

给父盒子添加clearfix属性来清除浮动。

.clearfix:before,.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom: 1;
}

此方法让代码更加简洁，但是对低版本浏览器仍然支持不足。在开发中大多主要采用此方法。

以上就是清除浮动的四种方法。