BFC的概念

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

通俗理解

BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

生成BFC

根元素或包含根元素的元素
浮动元素 float ＝ left | right | inherit（≠ none）
绝对定位元素 position ＝ absolute 或 fixed
display ＝ inline-block | flex | inline-flex | table-cell | table-caption
overflow ＝ hidden | auto | scroll (≠ visible)

BFC的特性

BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
BFC 区域不会和 float box 发生重叠。
BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。

BFC的作用

清除浮动

浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为高度塌陷。
解决高度塌陷问题的前提是能够识别并包含浮动元素，也就是清除浮动。

清除方法：创建BFC

<div class="container">
  <div class="Sibling"></div>
  <div class="Sibling"></div>
</div>

.container { 
  overflow: hidden; /* 生成BFC */
  background-color: green; 
} 
.container .Sibling { 
  float: left; 
  margin: 10px;
  background-color: lightgreen;  
}

注意：通过 overflow: hidden 创建 BFC，固然可以解决高度塌陷的问题，但是大范围应用在布局上肯定不是最合适的，毕竟 overflow: hidden 会造成溢出隐藏的问题，尤其是与 JS 的交互效果会有影响。

改进：使用clear: both

<div class="container clearfix">
  <div class="Sibling"></div>
  <div class="Sibling"></div>
</div>

.container { 
  background-color: green; 
} 
.container .Sibling { 
  float: left; 
  margin: 10px;
  background-color: lightgreen;  
}
.clearfix::after {
  content: "";
  display: block;
  clear: both; // 清除浮动
}

避免外边距折叠

外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC，它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ，就可以避免外边距折叠。

参考