块容器如何才能同时建立块和内联格式化上下文? [英] How can block container establish both block and inline formatting contexts at the same time?

问题描述

来自 CSS显示模块3级规格中有关于block container的注释，内容为:

From the CSS Display Module Level 3 specs there is a note about block container that says:

注意:块容器框都可以建立块格式 上下文和内联格式设置上下文.

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

从概念上讲这怎么可能?

How is this possible conceptually?

那么子框如何布置?例如，如果我们在块容器中同时具有内联级框和块级框，那么在这种情况下使用哪种格式化上下文?是同时使用两种格式化上下文，还是其中一种胜出"而另一种被搁置了?

And how are children boxes laid out then? For example, if we have both inline-level and block-level boxes inside block container, which formatting context is used in that case? Are both formatting contexts used at the same time or one of them "wins" and the other one is put aside?

推荐答案

对于某些CSS规则，这是完全可能的，甚至是必要的.理解这一点的最简单方法是使用此类框的示例.

It's entirely possible, and even necessary for certain CSS rules. The easiest way to understand this is with an example of such a box.

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

在这里，我们有一个带display:block(默认是div元素)和overflow:auto的元素.这是元素的渲染框将建立块格式上下文的一种方式.例如，这会影响浮子的存在如何影响盒子的位置和尺寸.

Here we have an element with display:block (by default for div elements) and overflow:auto. This is one way that an element's rendered box will establish a block formatting context. This affects, for example, how the box's location and dimensions are affected by the presence of floats.

比较这两个例子:

.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具有overflow:visible，因此它不会形成块格式设置上下文.

In the first example, the text wraps underneath the image. That's because the div with class "formatting contexts" has overflow:visible, so it doesn't form a block formatting context.

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

However, it contains only inline boxes - formed by the text content. So by the CSS rules, it establishes an inline formatting context. The text content can therefore be laid out horizontally in line boxes within this context. It is the first line box which is shrunk to avoid overlapping with the float.

在第二个示例中，文本不环绕在图像下方.这是因为具有类格式设置上下文"的div现在具有overflow:auto，这意味着它建立了一个块格式设置上下文，并且缩小了块框，以避免其与浮点数重叠.但是它的内容是一样的，只是内联框，所以它也建立了内联格式上下文.

In the second example, the text does not wrap underneath the image. That's because the div with class "formatting contexts" now has overflow:auto which means that it establishes a block formatting context, and it is the block box that is shrunk to avoid it overlapping the float. But its contents are just the same, just inline boxes, so it also establishes an inline formatting context.

这篇关于块容器如何才能同时建立块和内联格式化上下文?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！