BFC | Stacy's Notes

什么是 BFC

BFC（block formattting context），块级格式化上下文，我们在 CSS 中的许多行为都会创建新的 BFC ，到底什么是 BFC 呢？它提供了一个独立布局的环境，理解为一个盒子（块级元素），这个盒子里的一切布局不受外界影响(我们可以利用这个特性来消除浮动元素或者对其非浮动的兄弟元素和其子元素带来的影响)，但盒子内部的布局存在相互影响。本文将从“何时产生新的 BFC ”以及“如何应用 BFC 实现我们想要的样式效果”两个方面展开。

什么情况下产生 BFC

当 CSS 中设置里以下属性中的一种或多种时，都会创建新的BFC。

float：left | right； //not none
position: absolute | fixed;
display: table-cell | table-caption | flex | inline-flex | inline-block;
overflow: hidden | scroll | auto; //not visible

在 BFC 中，对于从左到右的格式，每一个盒子的 margin-left 都会碰到容器的 border-left ，除了盒子里创建里一个 BFC 。

应用 BFC

消除 Collapsing Margin

我们知道，在 CSS 中，相邻的两个块级元素的外边距会出现重叠，从而形成一个重叠的外边距。这里的相邻也就时必须满足以下情况：

处于同一个 BFC 中的正常文档流中的块级元素；
元素之间不存在间隙（clearance），并且没有 padding 和 border 将它们分开:
根据 W3C 规范，浮动元素之后的元素设置 clear
闭合相关浮动时，闭合浮动的元素会在其 margin-top 上形成一定的空隙，也就是我们这里所说的 clearance （通常情况下我们不需要计算出来，具体计算可以参考上文中 clearance 的定义链接），这个间距会阻止 margin-top 的叠加。

See the Pen clearance by stacyyy (@Stacyyy) on CodePen.

从上面的例子中，我们可以看到，上下两个块级元素的间距只有上面的块计元素的 margin-bottom 决定，显示为 20px ，而闭和浮动元素的 margin-top 值 100px 并未和浮动元素的 margin-bottom 进行叠加，而是紧贴着它的 margin-bottom。
我们可以看到，第一个盒子和第二个盒子的外边距并未发生重叠，可以得出结论，闭合浮动不能使浮动元素回到原来的 BFC 。
都属于垂直方向上的相邻外边距（父子元素、兄弟元素、元素自身）:
- 元素的 margin-top 和第一个常规文档流的子元素的 margin-top；
  
  See the Pen collasping1 by stacyyy (@Stacyyy) on CodePen.
- height 值为 auto 的元素的 margin-bottom 和最后一个常规文档流的子元素的 margin-bottom；
  
  See the Pen collasping2 by stacyyy (@Stacyyy) on CodePen.
- 元素的 margin-bottom 和下一个常规文档流的兄弟元素的 margin-top；
- height 为0并且 min-height 也为0，不包含常规文档流的子元素并且自身没有建立新的 BFC 的元素的 margin-top 和 margin-bottom；