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?

回答1:

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

回答2:

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.

回答3:

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