[前端] 深入理解float元素浮动&clear:both清除浮动原理

之前面试时碰到了一道题目，要求让我使用伪元素来清除浮动，由于没有深入研究过clear:both这个CSS属性，没有搞清楚它是具体怎么做到消除浮动的，所以最终答得不太好，影响了面试。之后查了资料，写出这篇文章，希望帮助到一样刚入前端圈的同学们～

为什么要有float元素？

在初期，float解决的主要是文字环绕的问题，在word中就有类似的功能，试想我们把一张图片摆在一边，然后文字会环绕它展示。如下图这样

图1 MDN官方float应用场景

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

虽然我们经常会遇到float脱离文档流而造成的布局问题，但float的使用目的就使得它与绝对定位的本质区别：float元素需要使周围元素环绕于它。内联元素与p标签会识别float为正常文档流。

举个例子，下面是内联元素环绕浮动元素和p标签（它是块级元素，文本内容）环绕浮动元素时的布局。

图2 span标签环绕于float元素

图3 p标签环绕于float元素

与绝对定位不同，内联元素（span为例）可以识别到float元素，并布局在float div的右边；同时p标签文本也与float元素形成了环绕，但是可以通过加了颜色的border看出，p元素其实塌陷了，现在它的绘制起点与float div一样，都在左上角。如果这个div不是float元素的话，右边的p元素应该会换行(块级元素特性)。

联想一下，经常我们做前端会说的清除浮动解决了父级塌陷问题的场景，父级塌陷是下图这样的

图4 float元素引起的父级塌陷

可以发现，无论是父级块元素，还是同级周围块级元素，尽管文本形成了环绕，但是块级元素都会忽略float元素本身的布局，在同一行进行渲染。

也就是说，如果我们没有用某种方法让float元素后面换行，我们就会面临float元素行内的元素塌陷问题。这也就引出了我们下面的问题。

clear:both clear的是什么？

clear：both解决的核心问题是换行问题，以MDN网站上的实例来分析

图5 clear后的float布局

可以看到float left元素就变成了普通块级元素一样，文字不再环绕它，而是另起一行。而没有clear的右侧浮动元素，仍然被文字环绕着。

另外一种消除元素浮动的方法：BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

两种比较方便的使用方法是

1. display: flow-root (其他的比如inline-block也可以)

2. overflow: 除了visible的其他值

总结

1. float 元素的核心目的是让周围元素环绕，清除浮动是解决父级元素塌陷的问题。

2. 清除浮动有两种方式:

a. clear:both属性，常用空content + clear:both的伪元素来完成换行

b. 块格式化上下文（Block Formatting Context，BFC）包上浮动元素