BFC(Block formatting context)，块级格式化上下文。它是 CSS 中一种强大的布局概念，它提供了一种隔离和控制元素布局的机制。
BFC的特性
1、独立渲染区域。
具有 BFC 特性的元素拥有独立的渲染区域，可以看作是一个容器，容器内部的元素不会影响到外部容器。
<div style="width: 100%">
<div style="width: 100px; height: 50px; float: left; background-color: red; color: #ffffff;">box1</div>
<div style="background-color: blue; color: #ffffff;">
box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、
box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、
box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2
</div>
</div>
box1 和 box2 处于不同的 BFC 中，box2 的内容不会影响到 box1 的位置。
2、边距重叠的处理。
在同一个 BFC 中，垂直相邻的子元素的边距会发生重叠，取两个边距中的最大值。
<div style="width: 100%">
<div style="width: 50px; height: 50px; margin: 100px; background-color: red; color: #ffffff;">box1</div>
<div style="width: 50px; height: 50px; margin: 50px; background-color: red; color: #ffffff;">box1</div>
</div>
box1 和 box2 处于同一个 BFC 中，它们的垂直边距发生了重叠，取最大值。
如果想要禁止发生重叠，可在子元素上增加父元素。
3、清除浮动。
BFC 可以用于清除浮动。在开发过程中，我们会遇到需要清除浮动的操作，而各种清除浮动的方法实质上都是基于BFC的原理。详解如下。
<div style="border: 1px solid red;">
<div style="width: 50px;height: 50px;background: blue;float: left;"></div>
</div>
为什么会出现这种情况呢？主要是由于浮动的块状元素会脱离文档流，从而导致父元素未包裹住浮动元素。
我们可以添加 overflow: hidden 属性禁止子元素脱离父元素（超出后隐藏）。
<div style="border: 1px solid red; overflow: hidden;">
<div style="width: 50px; height: 50px; background: blue; float: left;"></div>
</div>
BFC的布局规则
BFC 内部的子元素会在垂直方向上依次放置。
BFC 内部的两个垂直相邻的子元素边距（margin）会发生重叠，最终会取边距（margin）的最大值。
BFC 是页面上的一个隔离的独立容器，容器内部的子元素不会影响到外部的元素。
BFC 不会与已经浮动（float）的元素发生重叠。
计算 BFC 的高度时，浮动元素也会参与计算。
如何生成BFC
通过设置元素的某些属性：
float：left、right
overflow：auto、hidden
position：absolute、fixed
display：inline-block、flex、inline-flex、table-cell、table-caption
BFC的常见应用场景
- 清除浮动：通过创建BFC，可以解决浮动元素造成的父容器无法包裹的问题，避免布局崩塌。
- 解决边距重叠：在某些情况下，我们可以利用BFC特性来避免边距重叠的问题，提高布局的可控性。
- 制作多栏布局：利用BFC的特性，我们可以实现多栏布局，每个栏目的高度可以独立自适应，不会相互影响。
- 解决文字环绕问题：通过创建BFC，可以让文本环绕浮动元素或其他元素，实现更灵活的页面布局效果。
