在CSS Visual Formatting Model中,"元素流"是什么意思?

use*_*159 3 css w3c language-lawyer

CSS2第9.3节:定位方案:

如果元素浮动,绝对定位或是根元素,则称其为流出流.如果元素不是流出的,则称其为in -flow.元素 A 的是由A和所有流入元素组成的集合,其最近的流出祖先是A.

我能理解流出流入的意思,但我不明白最后一句中"最近流出的祖先"的含义.有谁可以提供一个简单的例子?

Xan*_*hir 7

来源:我是一名 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
Run Code Online (Sandbox Code Playgroud)

有两个非流元素 - HTML 元素和 DIV 元素。HTML 元素的“流程”是其本身、BODY 元素以及#one 和#third;如果您遍历每个元素的祖先树,它们遇到的第一个外流元素就是 HTML 元素。

DIV 有它自己的流程,由它本身和 #two 组成,因为当您遍历 #two 的祖先链时,您先访问 DIV,然后再访问 HTML。

粗略地说,元素的“流”是在布局中协同工作的一组事物。流出元素(及其后代)大多独立布局。

这个概念其实并不是很有用,不过——不用担心。


Ori*_*iol 5

从您问题的定义来看,它似乎并不复杂.在以下示例中,

div {
  border: 1px solid;
  margin: 10px;
}
.out-of-flow {
  float: left;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

  • 元素#1的流动本身就是它.它有一个in-flow子元素,但由于#1不是流出的,它不能是#1a最近的流出祖先.

  • 元素#2的流动本身就是它.它没有流入的后代,即使它有,#2也不会流出.

  • 元素#3的流动本身和#3a,因为#3a是流入的并且它最近的流出祖先是#3.

  • 元素#4的流动本身就是它.它没有流入的后代.