In the CSS Visual Formatting Model, what does “the flow of an element” mean?

In CSS2 Section 9.3: Positioning schemes:

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

I can understand what out of flow and in-flow means, but I don't understand what "nearest out-of-flow ancestor" in the last sentence means. Can anyone provide a simple example?

An element is called out of flow if it is floated, absolutely positioned, or is the root element.

If an element is floated, position:absolute, position:fixed or the <html> element, it is out of flow.

An element is called in-flow if it is not out-of-flow.

Self-explanatory.

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.

This is ridiculously confusing. And there seems to be nothing online providing a good explanation. In fact, even the CSS Working Group refers to this phrase as "nonsensical".

From the definition in your question, it doesn't seem much complicated. In the following example,

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>

The flow of the element #1 is only itself. It has an in-flow child element, but since #1 is not out-of-flow, it can't be the nearest out-of-flow ancestor of #1a.
The flow of the element #2 is only itself. It has no in-flow descendant, and even if it had, #2 is not out-of-flow.
The flow of the element #3 is itself and #3a, because #3a is in-flow and its nearest out-of-flow ancestor is #3.
The flow of the element #4 is only itself. It has no in-flow descendant.

Source: I'm a CSS spec editor.

While it's not spelled out explicitly in the text, it's implied from the definition that only out-of-flow elements (including, most commonly, the root element) have a flow. The flow is all the elements that are descendants of an out-of-flow element, except those that are "hidden" by being nested into another out-of-flow element.

For example, in:

<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

There are two out-of-flow elements - the HTML element and the DIV element. The "flow" of the HTML element is itself, the BODY element, and #one and #three; if you walk the ancestor tree for each of these, the first out-of-flow element they encounter is the HTML element.

The DIV has its own flow, consisting of itself and #two, because when you walk #two's ancestor chain, you hit the DIV first, before you hit HTML.

Roughly speaking, the "flow" of an element is the set of things that all work together in layout. Out-of-flow elements (and their descendants) lay out mostly independently.

The concept isn't really very useful, tho - don't worry about it.

来源：https://stackoverflow.com/questions/40325236/in-the-css-visual-formatting-model-what-does-the-flow-of-an-element-mean

标签

css

language-lawyer

w3c