CSS 中流(flow)的理解(in-flow ,out-of-flow)

规范中规定:

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)。

<p>【译注】换句话说,也就是流内的元素必须是「normal flow(普通流)元素」,流外的元素必须是浮动和绝对定位的元素以及根元素。</p>
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 元素本身,以及(1)元素 A 的流内的子元素且(2)这些子元素最近的流外祖先是 A 元素。

<p>【译注】这里需要注意的是,元素的流是一个集合,必须同时满足上面两个条件,缺一不可。</p>

  <h3>示例:</h3>
<div  >
  <div ></div>
  <div  >
    <div ></div>
  </div>
  <div >
  <div ></div>
</div>
<div>以上示例中,A 元素的流包含分析如下:
<ol>
  <li>A 和 C 是流外的元素,所以 C 被排除</li>
  <li>D 元素由于最近的流外祖先是 C,所以他也不是 A 的流</li>
  <li>所以最终 A 元素流内的元素只剩下:ABEF</li>
</ol>
</div>