BFC渲染问题：仅外层为BFC时为何高度仅包含子元素的margin-top

首先要明确两个核心的CSS布局规则：空块级元素的margin折叠规则、BFC对margin折叠的限制范围，我们逐个拆解三组代码的表现：

核心规则先理清 #

1. 空块级元素（无内容、无内边距、无边框）在正常文档流下，自身的上下margin会发生合并，合并后的高度等于单个margin的数值。
2. BFC容器仅会阻止「容器自身和内部子元素的margin折叠」，但不会阻止「容器内部的子元素自身发生margin折叠」。

三组代码表现的原因 #

第一组（外层非BFC）

外层.out不是BFC，所以首先空元素.in的上下10px margin先合并为10px，接着这个合并后的margin又和.out的上下margin发生父子折叠，全部溢出到.out外部，因此.out的高度为0。

第二组（仅外层是BFC）

外层.out是BFC，阻止了子元素.in的margin和自身发生父子折叠，合并后的margin会被包裹在.out内部。但此时.in还是普通空块级元素，自身的上下10px margin依然会合并为10px，因此.out的高度就是这个合并后的10px，不是margin-bottom没被计算，而是子元素的上下margin已经合并成了一个。

第三组（内外层都是BFC）

当.in自身也变成BFC后，BFC的特性会阻止空元素自身的上下margin折叠，此时.in的上下margin是独立的两个10px，外层.out作为BFC会完整包裹这两个margin，因此总高度是10px + 0（.in内容高度） + 10px = 20px。

内容的提问来源于stack exchange，提问作者AlphaDu