定义

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

常见的 BFC 创建方式

浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块 inline block 元素
overflow 值不为 visible 的块元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
display值为 flow-root 的元素

BFC 的特性

1、块级元素会在垂直方向上一个接一个的排列，和文档流的排列方式一致；

2、同一个 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免外边距折叠；

3、计算 BFC 的高度时，需要计算浮动元素的高度；

4、BFC 区域不会与浮动的容器发生重叠；

5、BFC 是独立的容器，容器内部元素不会影响外部元素；

6、每个元素的左 margin 和容器的左 border 相接触；

7、在父级块中使用 display: flow-root 可以创建无副作用的 BFC。

BFC 的作用

1、清除浮动(特性3)；

<div class="bfc">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.box {
  float: left;
  width: 100px;
  height: 180px;
  margin: 10px;
  background: cyan;
}

.bfc {
  /* 计算 BFC 高度时，浮动元素也会参与计算，可以利用这一点清除 BFC 内部的浮动 */
  /* 尝试去掉 overflow 的注释，看效果 */
  overflow: auto;
  min-height: 50px;
  background: gray;
}

2、阻止外边距重叠；

外边距重叠

1 什么是外边距重叠

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

2 出现外边距重叠的三种情况

2.1 同一层相邻元素之间

相邻的两个块元素之间的外边距重叠。

2.2 父元素与后代元素

没有内容将父元素和后代元素分开。

如果没有 border，padding，行内内容，也没有创建 BFC 来分开一个块级元素的上边界 margin-top 与其内一个或多个后代块级元素的上边界 margin-top ；就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

2.3 空的块元素

当一个块元素上边界 margin-top 直接贴到元素下边界margin-bottom 时也会发生边界折叠。即高度为 0 、display:inline 或是加上 clear: none 的时候。

3 负 margin

如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和,；也就是说如果有-13px 8px 100px叠在一起，边界范围的技术就是 100px -13px的87px。
如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

BFC 与外边距重叠

定义