在 CSS 视觉格式模型中，"the flow of an element" 是什么意思？

Question

在CSS2 Section 9.3: Positioning schemes中：

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

我能理解 out of flow 和 in-flow 的意思，但我不明白 "nearest out-of-flow ancestor"在最后一句的意思是。谁能提供一个简单的例子？

Answer 1

从你问题的定义来看，似乎并不复杂。在下面的例子中，

div {
  border: 1px solid;
  margin: 10px;
}
.out-of-flow {
  float: left;
}

<div id="1" class="in-flow">
  #1 is in-flow
  <div id="1a" class="in-flow">#1a is in-flow</div>
</div>
<div id="2" class="in-flow">
  #2 is in-flow
  <div id="2a" class="out-of-flow">#2a is out-of-flow</div>
</div>
<div id="3" class="out-of-flow">
  #3 is out-of-flow
  <div id="3a" class="in-flow">#3a is in-flow</div>
</div>
<div id="4" class="out-of-flow">
  #4 is out-of-flow
  <div id="4a" class="out-of-flow">#4a is out-of-flow</div>
</div>

元素#1 的流只有它自己。它有一个流入的子元素，但由于#1 不是流外的，它不可能是#1a 最近的流外祖先。
元素#2 的流只有它自己。它没有流入后代，即使有，#2 也不是流出。
元素#3的流是它自己和#3a，因为#3a是流入的，它最近的流出祖先是#3.
元素#4 的流只有它自己。它没有流入后代。

Answer 2

An element is called out of flow if it is floated, absolutely positioned, or is the root element.

如果一个元素是浮动的，position:absolute、position:fixed 或 <html> 元素，它是不流动的。

An element is called in-flow if it is not out-of-flow.

一目了然。

The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

这太令人困惑了。而且网上似乎没有什么可以提供很好的解释。其实连the CSS Working Group refers to this phrase as "nonsensical".

Answer 3

资料来源：我是 CSS 规范编辑。

虽然文本中没有明确说明，但从定义中暗示只有流外元素（包括最常见的根元素）具有流。流是流外元素的所有后代元素，除了那些 "hidden" 通过嵌套到 另一个 流外元素中的元素。

例如，在：

<html>
 <body>
  <p id=one>some in-flow text
  <div style="position: absolute;">
   <p id=two>some in-flow text
  </div>
  <p id=three>some in-flow text

有两个流外元素 - HTML 元素和 DIV 元素。 HTML元素的"flow"就是它自己，BODY元素，还有#one和#three；如果你遍历其中每一个的祖先树，他们遇到的第一个流外元素是 HTML 元素。

DIV有自己的流程，由它自己和#two组成，因为当你走#two的祖先链时，你先碰到了DIV，然后才碰到了HTML .

粗略地说，元素的 "flow" 是在布局中协同工作的一组事物。流外元素（及其后代）大多独立布局。

这个概念并不是很有用，不过 - 别担心。

在 CSS 视觉格式模型中，"the flow of an element" 是什么意思？

In the CSS Visual Formatting Model, what does "the flow of an element" mean?

css

language-lawyer

w3c