块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分。它是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
BFC 特性
- BFC 在 Web 页面上是一个独立的容器，容器内外的元素互不影响
- 和标准文档流一样，BFC 内的两个相邻块级元素垂直方向的边距会发生重叠
- BFC 不会与浮动元素的盒子重叠
- BFC 在计算高度时会把浮动元素计算进去
触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性（详细）：
- 根元素（
<html>） - 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- display 为 inline-block、table-cells、flex、grid...
- overflow 值不为 visible 的块元素（hidden、auto、scroll）
- ...
BFC 应用
清除浮动
当父元素没有设置高度，且子元素为浮动元素的情况下，父元素会发生高度坍塌，上下边界重合，即浮动元素无法撑开父元素。
<div class="parent">
<div class="child"></div>
</div>
给子元素设置浮动：
.child {
float: left;
}
高度塌陷
可以看到，子元素浮动后，父元素失去了高度。
为了解决浮动元素造成的父元素高度塌陷问题，可以将父元素设置成一个 BFC 来清除浮动，将父元素整体设置为 BFC 环境
.parent {
overflow: auto;
}
高度塌陷
元素浮动后发生重叠
<div class="box1"></div>
<div class="box2"></div>
给第一个盒子设置浮动：
.box1 {
float: left;
}
元素重叠
可以看到，由于 box1 发生浮动，box2 未发生浮动，而浮动元素由于脱离文档流，第一个盒子堆叠在第二个盒子上。
为了让两个元素不重叠，我们把右边的盒子设置成 BFC：
.box2 {
overflow: hidden;
}
元素重叠
外边距重叠
在标准文档流中，毗邻的两个或多个块级元素之间垂直方向的 margin 会合并成一个 margin，会取两个元素 margin 最大的那一个，这就是外边距重叠。
有三种情况会形成外边距重叠（Margin collapsing）：
同一层相邻元素之间
没有内容将父元素和后代元素分开
空的块级元素
而创建了块级格式化上下文（BFC）的元素，不会和它的子元素发生 margin 重叠。
我们可以使用例如 overflow：hidden 来产生一个 BFC 环境来解决该问题。
<div></div>
<div></div>
给两个 <div> 元素设置外边距：
div {
margin: 50px;
}
外边距重叠
可以看到，第一个元素的下边距和第二个元素的上边距发生了重叠。
解决边距重叠的问题，可以将其放在不同的 BFC 容器中。
<div class="container">
<div></div>
</div>
<div class="container">
<div></div>
</div>
外边距重叠
因为 BFC 是一个独立的容器，容器内外互不影响。
