之前面试时碰到了一道题目，要求让我使用伪元素来清除浮动，由于没有深入研究过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） 包上浮动元素
网友评论