xfq159 xfq159 - 1 month ago 9
CSS Question

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?

Answer

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