We have talked about how some elements are removed from the normal flow due to absolute positioning, floats, etc. What happens to the flow of their nested/ descendant elements?
Well, the out-of-flow elements establishes a new flow for the layout of its child elements. That establishes a new independent formatting context - a formatting context is an area in which descendant boxes are laid out according to specific rules.
Everything on a page is part of a formatting context. The root element establishes a block formatting context where boxes are laid out according to the block-and-inline layout rules. Out-of-flow elements creates a new formatting context.
Watch out for:
New formatting context creation: Overflow anything other than visible, elements with display: inline-block, grid items create new block formatting context
Margin-collapsing: margins do not collapse across formatting context boundaries
Floats: An element that establishes a new block formatting context will contain internal floats and exclude external floats.
Top comments (0)