谁负责为body元素建立初始块格式化上下文？

问题描述 #

我正在阅读CSS2.1规范学习CSS的视觉格式化模型，这个概念比较难理解，目前也没有更直观讲解该知识点的文章。
我想咨询谁负责为body元素建立初始格式化上下文。当两个div放在body内部时，二者会垂直堆叠，示例如下：

<body>
    <div>1</div>
    <div>2</div>
</body>

由于body内的两个块级盒子垂直堆叠，说明它们参与了block formatting context（块格式化上下文，简称BFC），此时body作为块容器盒子存在，我不清楚该块格式化上下文的建立主体是什么。
最初我以为所有元素都能自行建立块/行内格式化上下文，读完以下规范内容后发现并非如此。显然body（或div等）不属于浮动元素、绝对定位元素，也不是非块盒的块容器等类型：

浮动元素、绝对定位元素、非块级盒子的块容器（如inline-block、table-cell、table-caption），以及overflow取值不为visible的块级盒子（除非该值已经被传播到视口），会为自身内容创建新的块格式化上下文。

更新：我已经在w3c/csswg-drafts提交了该问题。

解答 #

默认状态下的body元素确实不会主动创建独立BFC，对照规范得出的相关结论是正确的：普通overflow: visible的块级盒子（包括body、无特殊样式的div等）都不在规范列明的BFC触发范围内，不会为自身内容生成独立BFC。

body内部块级元素参与的是页面的根级初始BFC，这个BFC是浏览器渲染页面时自动生成的根级格式化上下文，承载容器为初始包含块（尺寸与视口绑定的根级渲染容器），页面内所有没有归属到独立BFC的元素，默认都在这个根级BFC中参与排版。

可以通过简单测试验证这个逻辑：给body内部的第一个块级子元素设置margin-top: 50px，会发现整个body都会跟着向下偏移50px，子元素的margin直接穿透body和根级容器发生margin折叠，这就是因为body没有创建独立BFC，子元素的margin规则受根级初始BFC约束。

如果需要让body自身创建独立BFC，只要给它设置符合触发条件的属性即可，比如overflow: auto、display: flow-root都可以实现。

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