DEV Community


Formatting Context (CSS layouts)

poulamic profile image Poulami Chakraborty ・1 min read

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.


Editor guide