BFC（Block Formatting Context）是 CSS 中的一个概念，它定义了块级盒子的布局规则。BFC是一个独立的渲染区域，它决定了块级盒子如何布局，以及与其他元素的关系和相互作用。
BFC 的主要特性
-
内部布局：在 BFC 中，盒子从包含块的顶部开始，垂直地一个接一个地放置。相邻的块级盒子之间的垂直间距由
margin属性决定。 -
隔离性：BFC 内部的元素不会影响到 BFC 外部的元素，反之亦然。这意味着 BFC 可以用来创建一个独立的布局环境，防止外部布局规则影响到内部，或者内部布局规则影响到外部。
-
防止外边距塌陷：在普通文档流中，两个相邻的块级盒子的垂直外边距会发生合并（塌陷）。但在 BFC 中，这种外边距塌陷不会发生。
-
包含浮动元素：如果一个 BFC 包含浮动元素，那么 BFC 的高度会考虑这些浮动元素的高度，从而防止父元素因为子元素浮动而高度塌陷。
-
阻止文字环绕：BFC 可以用来阻止文字环绕浮动元素，因为 BFC 内部的块级盒子会垂直排列，而不是环绕浮动元素。
创建 BFC 的条件
如前所述，以下条件会创建一个新的 BFC：
- 根元素（
<html>） - 浮动元素（
float属性不为none） - 绝对定位元素（
position属性为absolute或fixed） display属性为inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-gridoverflow属性不为visible（即overflow为auto、scroll或hidden）contain属性值为layout、content或paintcolumn-span属性设置为all
BFC 的应用
BFC 在实际开发中有很多应用，例如：
- 清除浮动：通过创建 BFC，可以确保父元素包含其浮动子元素。
- 防止外边距塌陷：通过创建 BFC，可以防止相邻元素的外边距合并。
- 创建多列布局：通过创建 BFC，可以实现多列布局，每一列都是一个独立的 BFC。
- 防止文字环绕：通过创建 BFC，可以防止文字环绕浮动元素。
理解 BFC 的概念和特性对于掌握 CSS 布局是非常重要的，它可以帮助开发者更好地控制页面布局和解决一些常见的布局问题。
