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.