= CSS flow-root
{c}
<CSS flow-root> is the `flow-root` display value that creates a block container establishing a new <CSS block formatting context>. It provides an explicit way to isolate the relevant flow-layout interactions without requesting clipping or scrollbars.<CSS Display Module Level 3 by World Wide Web Consortium>[§2.2, flow-root; Appendix A, formatting-context boundaries]{ref}
A margin example makes the boundary visible. Suppose an ordinary block parent has zero margin, padding and border, automatic height, and one in-flow block child of height $20$ <CSS pixels>. The child has top margin $30$ and all other margins zero. Assume no other constraints or clearance. With ordinary `display: block`, the child's top margin can collapse through the parent's top; the parent's content height is $20$ in this setup. With `display: flow-root`, the margin does not collapse across that context boundary, so the parent includes the thirty-pixel top margin and twenty-pixel child, giving height $50$.<CSS Display Module Level 3 by World Wide Web Consortium>[Appendix A, margins across formatting-context boundaries]{ref}<Visual formatting model details in CSS 2.2 by W3C>[§§10.6.3 and 10.6.7, automatic heights]{ref}
This does not disable every internal instance of <CSS margin collapsing>. Two eligible sibling blocks inside the new context can still combine adjoining margins of twenty and thirty pixels into thirty. The boundary separates contexts; it does not rewrite all spacing rules within one.
The modern display terminology also separates outer and inner roles. `display: inline-block` corresponds to an inline outer role with a flow-root inner role. Thus a <CSS inline-block box> can sit in a surrounding line while independently formatting its contents.<CSS Display Module Level 3 by World Wide Web Consortium>[§2, display summary table]{ref}
Finally, <CSS flow-root> is distinct from `overflow: hidden` or `overflow: clip`. Those values concern <CSS overflow>, with their own clipping and scrolling behavior. Choose an independent flow context for its layout effect rather than treating all these declarations as interchangeable.
Back to article page
