css-flow

发表于

in-flow和out-of-flow

规范规定

1
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.

如果一个元素是浮动的(float:left/right)，绝对定位的(position:absolute/fixed)或者是根元素(html)，那么它被称之为流外的元素(out-of-flow)。如果一个元素不是流外的元素，那么它被称之为流内的元素(in-flow)。

1
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.

元素 A 的流是一个集合，包含 A 元素本身，以及元素 A 的流内的子元素且这些子元素最近的流外祖先是 A 元素。

示例

1
2
3
4
5
6
7
8
<div class="A" style="position: absolute;">
  <div class="B"></div>
  <div class="C" style="position:absolute">
    <div class="D"></div>
  </div>
  <div class="E">
  <div class="F"></div>
</div>

以上示例中，A 元素的流包含分析如下：

  1. A 和 C 是流外的元素，所以 C 被排除
  2. D 元素由于最近的流外祖先是 C，所以他也不是 A 的流
  3. 所以最终 A 元素流内的元素只剩下：ABEF