Question

在CSS2 Section 9.3: Positioning schemes中：

如果元素是浮动的，绝对定位的，或者是根元素，则该元素称为 out of flow 。如果元素不在流程外，则称为 in-flow 。元素的流 A是由A和所有流入元素组成的集合，其最近的流出祖先是A.

我可以理解 out of flow 和 in-flow 意味着什么，但我不明白最后一句话中“离最近的流出祖先”是什么手段。任何人都可以提供一个简单的例子吗？

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的流程本身就是其中之一。它有一个in-flow子元素，但由于＃1不是流出的，它不能是＃1a最近的流出祖先。
元素＃2的流程本身就是其中之一。它没有流入的后代，即使它有，＃2也不会流出。
元素＃3的流动本身和＃3a，因为＃3a是流入的，它最近的流出祖先是＃3。
元素＃4的流程本身就是其中之一。它没有流入的后代。

Answer 2

如果一个元素浮动，绝对定位或者是根元素，则该元素被称为流出。

如果某个元素已浮动，position:absolute，position:fixed或<html>元素，则该元素已无法使用。

如果元素不在流程中，则称其为in-flow。

言自明的。

元素A的流是由A和所有流入元素组成的集合，其最近的流出祖先是A.

这令人难以置信。似乎没有任何在线提供一个很好的解释。实际上，甚至是the CSS Working Group refers to this phrase as "nonsensical"。

Answer 3

来源：我是CSS规范编辑器。

虽然文中没有明确说明，但从定义中可以看出，只有流出元素（包括最常见的根元素）才有流量。流是作为流出元素的后代的所有元素，除了那些通过嵌套到另一个流出元素中而“隐藏”的元素。

例如，在：

<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元素的“流”本身是BODY元素，＃one和#three;如果你为这些中的每一个走祖先树，他们遇到的第一个流出元素就是HTML元素。

DIV有自己的流程，包括它自己和#two，因为当你走＃two的祖先链时，你先点击DIV，然后再点击HTML。

粗略地说，元素的“流”是一组在布局中一起工作的东西。流出元素（及其后代）主要是独立出现的。

这个概念并不是非常有用，所以 - 不用担心。

在CSS Visual Formatting Model中，“元素流”是什么意思？

3 个答案: