BFC 的概念
在这之前我先介绍下 BFC 的概念，以方便大家理解后续清除浮动的实现思路：
块级格式化上下文（BFC）是 Web 页面中用来管理块级盒子布局的一种机制。它是一个独立的渲染区域，具有一定的布局规则，且内部的元素不会影响到外部元素。在 BFC 内部，元素将按照一定的规则进行布局，不同的 BFC 之间互相独立，互不影响。
以下是一些常见的 BFC 规则：
- BFC 内部的元素在垂直方向上一个接一个地放置（即每个元素的顶部和底部都与其相邻元素的顶部和底部相接触），并且在水平方向上可以通过设置
text-align属性来进行对齐。 - BFC 中的盒子不会重叠，即使它们的位置是负的（通过设置
margin属性来实现）。 - BFC 中的元素高度包括其所有的子元素（即使子元素浮动）。
- BFC 中的元素不会被浮动元素所覆盖。当一个元素浮动时，它会移动到最近的可用空间，而不会覆盖 BFC 中的元素。 BFC 可以清除浮动，避免出现父元素高度塌陷的情况。
CSS 清除浮动的方法
接下来，我们列举 5 种 CSS 清除浮动的方法，带你解析具体思路。
1.使用伪元素
该方法的思路是使用伪元素，为包含浮动元素的父元素添加一个清除浮动的元素。将伪元素的content属性设置为空字符串，将display属性设置为table，并为其添加clear: both;属性。
.parent::after {
content: "";
display: table;
clear: both;
}
2.使用 overflow 属性
该方法的思路是将包含浮动元素的父元素的overflow属性设置为hidden或auto，这将导致父元素创建一个块级格式化上下文（BFC），并清除浮动元素的影响。
.parent {
overflow: hidden;
}
3.使用 display 属性
该方法的思路是将包含浮动元素的父元素的display属性设置为table、table-row或table-cell，这将导致父元素创建一个块级格式化上下文（BFC），并清除浮动元素的影响。
.parent {
display: table;
}
4.使用flex布局
该方法的思路是将包含浮动元素的父元素设置为display: flex;，这将导致父元素创建一个块级格式化上下文（BFC），并清除浮动元素的影响。这种方法适用于不需要支持旧版浏览器的情况。
.parent {
display: flex;
}
📢 update 同步更新
掘金专栏 | 知乎专栏 | Github | 简书专栏 | CSDN | segmentfault
如果这篇文章对你有帮助，请不要吝啬你手中的赞👍！你的鼓励将是我不断分享的动力！😄
