谁负责为“body”元素建立格式化上下文？答案

【问题标题】：Who is responsible for establishing formatting context for `body` element?谁负责为“body”元素建立格式化上下文？
【发布时间】：2021-11-23 14:42:06
【问题描述】：

我正在阅读 CSS2.1 spec 以了解 CSS 的视觉格式化模型。这个概念让我很困惑，似乎没有文章更直观地解释它。

我的意思是谁负责为body 元素建立初始格式化上下文。当两个divs放在body里面时，它们是垂直堆叠在一起的，如下：

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

因为body 元素由两个块级框组成并且它们是垂直堆叠的，所以两个框似乎参与了一个块格式化上下文。在这种情况下，body 元素充当块容器框。我不明白谁建立了块格式化上下文。

起初，我认为任何元素都会自行建立块/内联格式化上下文。但是在阅读了下面的内容后，我意识到事实并非如此。当然，body（或div 等）不是浮动、绝对定位或不是块框的块容器等：

浮动、绝对定位元素、不是块框的块容器（例如内联块、表格单元格和表格标题），以及具有“溢出”而不是“可见”的块框（该值除外已传播到视口）为其内容建立新的块格式化上下文。

更新：我在w3c/csswg-drafts报告了这个问题。

【问题讨论】：

很确定 html 元素提供了这一点。不确定如何或是否可以从规范中得出，但它是mentioned over on MDN。
@Ouroborus 我是否正确理解了这个概念？ html 提供初始格式化上下文。默认情况下，html 的所有后代元素都继承并使用该格式化上下文。但是当我将浮点数应用于元素时，该元素会丢弃初始格式化上下文，然后自行创建新的块格式化上下文。
它不是继承，默认情况下所有元素都是 html 格式化上下文的一部分，但是您可以在其中创建更多内容
@rosshjb Temani 可能比我更擅长该主题，他的回答仍然涉及实际考虑。就试图理解规范而言，要知道 W3C sepcs 更多的是对常见实践的描述，而不是规范。他们可能会遗漏一些细节，或者很少会在常见实现方面完全错误。这对于较旧的规格更是如此。我怀疑您要询问的细节是其中缺少的部分。

标签： html css

【解决方案1】：

body 元素充当块容器框。

不，它没有。我们可以很容易地通过使用浮动元素来证明它：

.float {
  height:50px;
  width:50px;
  background:red;
  float:left;
}


body {
  border:2px solid blue;
}

html {
  border:2px solid green
}

&lt;div class="float"&gt;&lt;/div&gt; some text here

float 溢出了 body 元素，所以这个没有创建 BFC，但 html 元素正在这样做，因此您的 div 是由 html 元素创建的 BFC 的一部分。

如果将overflow:auto 添加到正文中，您将创建一个 BFC，并且浮动的行为会有所不同：

.float {
  height:50px;
  width:50px;
  background:red;
  float:left;
}


body {
  border:2px solid blue;
  overflow:auto;
}

html {
  border:2px solid green;
  overflow:auto; /* we need this to disable the overflow propagation */
}

&lt;div class="float"&gt;&lt;/div&gt; some text here

【讨论】：

你能和CSS2.1 spec协调吗？
@Ouroborus 这就是我所做的，我证明了 body 并没有像 OP 正在考虑考虑规范中描述的规则那样创建 BFC，而 html 是最上面的元素，因此它必须创建一个BFC，因为它没有父元素。
您所做的是展示了浏览器如何在这种情况下实现块格式化上下文。这与指出规范中描述同一事物的相关部分不同。如果您仅使用规范作为参考来开发自己的浏览器，那么如何得出html 元素应该启动块格式化上下文而不是例如包含视图的结论？您能否指出规范中的某些内容来证明该决定的合理性？