块容器如何同时建立块和内联格式化上下文？

Question

CSS Display Module Level 3 specs 中有一条关于 block container 的说明：

Note: A block container box can both establish a block formatting context and an inline formatting context simultaneously.

这在概念上怎么可能？

那么儿童盒子是怎么摆放的呢？例如，如果我们在块容器中同时有行内级和块级框，那么在这种情况下使用哪种格式化上下文？是两个格式化上下文同时使用还是其中一个"wins"另一个搁置？

Answer 1

这是完全可能的，对于某些 CSS 规则来说甚至是必要的。理解这一点的最简单方法是使用这样一个盒子的例子。

<div style="overflow:auto">hello world</div>

这里我们有一个元素 display:block（默认为 div 个元素）和 overflow:auto。这是元素的呈现框将建立块格式上下文的一种方式。例如，这会影响框的位置和尺寸如何受浮动的影响。

比较这两个例子：

.formatting.contexts {
  overflow:visible;
}

.container {
  width:70px;
}

img {
  float:left;
  margin-right:3px;
}

<div class="container">
  <img src="http://placehold.it/16" alt="placeholder grey square less than one line in height">
  <div class="formatting contexts">hello world</div>
</div>

.formatting.contexts {
  overflow:auto;
}

.container {
  width:70px;
}

img {
  float:left;
  margin-right:3px;
}

<div class="container">
  <img src="http://placehold.it/16" alt="placeholder grey square less than one line in height">
  <div class="formatting contexts">hello world</div>
</div>

在第一个示例中，文字环绕在图片下方。那是因为 div 和 class "formatting contexts" 有 overflow:visible，所以它没有形成块格式化上下文。

但是，它只包含行内框 - 由文本内容组成。所以根据 CSS 规则，它建立了一个内联格式化上下文。因此，文本内容可以在此上下文中水平放置在行框中。它是第一个缩小的行框，以避免与浮动重叠。

在第二个示例中，文本没有环绕在图像下方。那是因为 div 和 class "formatting contexts" 现在有 overflow:auto 这意味着它建立了一个块格式化上下文，并且它是缩小的块框以避免它与漂浮。但它的内容是一样的，只是内联框，所以它也建立了一个内联格式化上下文。

块容器如何同时建立块和内联格式化上下文？

How can block container establish both block and inline formatting contexts at the same time?

css

w3c