清除浮动的方法汇总

虽然现在有了flex和grid布局之后，浮动布局用得不多了，但是面试还可能会考清除浮动，所以这里总结一下。

为什么要清除浮动？清除浮动不是为了把浮动这行代码取消掉，而是解决浮动塌陷。

如下所示，div中有很多span，由于内容是不固定的，所以div没有设定高度。

div {
	width: 400px;
	background-color: #5cb85c;
}
div span {
	display: inline-block;
	width: 25%;
}

接下来，给span设置浮动，结果作为背景的div出现了塌陷，并没有出现在内容后面。这是因为元素设置浮动之后就脱离了正常的文档流，处于常规流中的div元素检测不到内部span，所以就会塌陷。使用清除浮动就可以告诉浏览器到什么位置就不需要继续浮动了，使后面的元素强制回到常规流。

div {
	width: 400px;
	background-color: #5cb85c;
}
div span {
	display: inline-block;
	width: 25%;
	float: left;
}

1. 父元素最后加空块元素并设置clear: both;

在父元素最后加一个空元素，这个空元素需要用块级元素。

<div>
	<h1>前端开发语言</h1>
	<span>HTML5</span>
	<span>CSS3</span>
	<span>JavaScript</span>
	<span>Java</span>
	<span>Python</span>
	<span>Golang</span>
	<p></p>
</div>

然后给这个空元素设置clear: both;即可清除浮动。当设置清除浮动后，等于告诉浏览器到这个位置就不需要进行浮动了，而且这个空元素是常规流，可以让父元素的高度扩展过来。但是这样做缺点也很明显，会产生大量空元素。

p {
	clear: both;
}

2. 创建BFC

BFC是一个独立的布局环境，内部的元素布局不受外部影响。创建BFC之后就可以包含住浮动的子元素了。

怎样触发BFC？
浮动元素：float 除 none 以外的值。
绝对定位元素：position (absolute、fixed)。
display 为 inline-block、table-cells、flex。
overflow 除了 visible 以外的值 (hidden、auto、scroll)。

如下所示，给父元素添加overflow: hidden;就可以触发BFC，实现清除浮动。overflow规定内容溢出的时候发生的情况，例如hidden就是将多余的隐藏掉。这个方法缺点也很明显，overflow: hidden;其实是影响了自身的属性，内部元素没法出去了。

div {
	width: 400px;
	background-color: #5cb85c;
	overflow: hidden;
}
div span {
	display: inline-block;
	width: 25%;
	float: left;
}

另外还可以给父元素设置浮动来触发BFC，这样父元素就能够包含住浮动的子元素了。这样也能解决浮动坍塌的问题，但是这样会导致父元素浮动，会影响其他元素的布局。

3. 给父元素设置伪元素after然后设置clear: both;

类似第一种方法，只不过这里用伪元素来实现。先给父元素加一个clearfix的类。

<div class="clearfix">
	<h1>前端开发语言</h1>
	<span>HTML5</span>
	<span>CSS3</span>
	<span>JavaScript</span>
	<span>Java</span>
	<span>Python</span>
	<span>Golang</span>
</div>

然后给这类设置伪元素。先把这个元素设置为空元素，然后伪元素需要是块级元素（默认是inline，所以需要设置一下），最后就是clear: both;清除浮动。

div {
	width: 400px;
	background-color: #5cb85c;
}
div span {
	display: inline-block;
	width: 25%;
	float: left;
}
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}

4. 清除浮动最友好的方式display: flow-root;

这个方法是本篇内容的重点，可以说以前用的方式都不是专门针对清除浮动的，而它才是专业。这个方法不会影响元素本身，也不会多写元素，直接把父元素的display改了就行。

如下所示，使用display: flow-root;形成BFC清除浮动。

div {
	width: 400px;
	background-color: #5cb85c;
	display: flow-root;
}
div span {
	display: inline-block;
	width: 25%;
	float: left;
}

最后一种方法来自一位大佬的文章：
第三期:前端九条bug分享