块格式化上下文（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
.parent {
overflow: auto;
}
查看效果
元素浮动后发生重叠
<div class="box1"></div>
<div class="box2"></div>
给第一个盒子设置浮动：
.box1 {
float: left;
}
可以看到，浮动元素由于脱离文档流，第一个盒子堆叠在第二个盒子上。
为了让两个元素不重叠，我们把右边的盒子设置成 BFC：
.box2 {
overflow: hidden;
}
查看效果
外边距重叠
有三种情况会形成
外边距重叠
（Margin collapsing）：
-
同一层相邻元素之间
-
没有内容将父元素和后代元素分开
-
空的块级元素
<div></div>
<div></div>
给两个
<div>
元素设置外边距：
div {
margin: 50px;
}
可以看到，第一个元素的下边距和第二个元素的上边距发生了重叠。
解决边距重叠的问题，可以将其放在不同的 BFC 容器中。
<div class="container">
<div></div>
</div>
<div class="container">
<div></div>
</div>
因为 BFC 是一个独立的容器，容器内外互不影响。
查看效果
