为何未形成Block Formatting Context(BFC)的盒子仍遵循BFC规则？

首先得纠正一个核心误区：垂直排列、外边距折叠这些不是BFC的专属规则，而是CSS正常流（Normal Flow）中块级元素的默认布局行为。BFC（块级格式化上下文）只是在这些基础规则之上，增加了额外的约束特性，而非定义这些基础规则。

具体拆解来看：

• 普通div、body这类块级元素，默认处于正常流中，块级元素在正常流里的默认排列逻辑就是垂直方向依次堆叠，每个块级盒子默认占满父容器的水平宽度（除非主动设置宽度），这是块级布局的基础逻辑，和BFC无关。
• 外边距折叠也是正常流里块级元素的默认行为：当两个相邻的块级元素（处于同一个格式化上下文）的垂直外边距相遇时，会合并成一个外边距，取两者的最大值。这同样是正常流的规则，不是BFC特有的——BFC的作用是阻止这种折叠，比如把某个元素变成BFC后，它和子元素的外边距就不会折叠，或者和相邻的非BFC元素也不会折叠。

拿你给出的代码做实际演示：

<div>
  <div style="margin: 20px 0; height: 50px; background: #ccc;"></div>
  <div style="margin: 20px 0; height: 50px; background: #eee;"></div>
</div>

这两个子div的上下外边距会折叠，最终两个盒子之间的间距是20px而非40px，这是正常流的默认行为。如果给父div加上overflow: hidden把它变成BFC，父div和第一个子div的上边距就不会折叠了，但子div之间的折叠依然存在——除非把其中一个子div也设置为BFC。

总结一下：

• 正常流的块级布局规则是基础，包含垂直排列、外边距折叠等；
• BFC是正常流的特殊子上下文，它继承了块级布局的基础规则，同时新增了「阻止外边距折叠」「包含浮动元素」「不与浮动元素重叠」等特性；
• 普通块级盒子遵循的是正常流的基础规则，这些规则被BFC继承，所以看起来像是遵循BFC规则，实际上是BFC沿用了正常流的块级布局逻辑。

内容的提问来源于stack exchange，提问作者丁少华