use*_*159 3 css w3c language-lawyer
如果元素浮动,绝对定位或是根元素,则称其为流出流.如果元素不是流出的,则称其为in -flow.元素 A 的流是由A和所有流入元素组成的集合,其最近的流出祖先是A.
我能理解流出和流入的意思,但我不明白最后一句中"最近流出的祖先"的含义.有谁可以提供一个简单的例子?
来源:我是一名 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。
粗略地说,元素的“流”是在布局中协同工作的一组事物。流出元素(及其后代)大多独立布局。
这个概念其实并不是很有用,不过——不用担心。
从您问题的定义来看,它似乎并不复杂.在以下示例中,
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的流动本身就是它.它没有流入的后代.