= CSS block formatting context
{c}
A <CSS block formatting context> is a formatting context in which block-level boxes participate in block layout and interact with relevant <CSS floats>. A box establishing a new context gives its contents an independent layout context. This is distinct from simply being a <CSS block container> or an ordinary block-level box.<Visual formatting model in CSS 2.2 by W3C>[§9.4.1, Block formatting contexts; §9.2.1, block container distinction]{ref}
<CSS flow-root>, selected by `display: flow-root`, explicitly creates a block container establishing a new <CSS block formatting context>. An ordinary <CSS inline-block box> similarly combines an inline outer role with an independent flow context for its contents.<CSS Display Module Level 3 by World Wide Web Consortium>[§2 display summary; §2.2, flow-root]{ref}
A useful controlled layout experiment gives a parent `width: 200px; height: auto; margin: 0; padding: 0; border: 0` and only one child, with `float: left; width: 80px; height: 60px; margin: 0`. With no other content or constraints, compare ordinary `display: block` with `display: flow-root` on the parent. The ordinary parent's content height is zero in this setup; the context-establishing parent's content height includes the sixty-pixel float. The child remains floated in both cases. This is a predicted result of the stated layout rules, rather than a browser timing measurement.<CSS Display Module Level 3 by World Wide Web Consortium>[Appendix A, formatting-context examples: containing internal floats]{ref}<Visual formatting model details in CSS 2.2 by W3C>[§§10.6.3 and 10.6.7, ordinary auto height versus context-root auto height]{ref}
Margins do not collapse across the context boundary, but eligible margins of sibling blocks inside it can still collapse. For example, adjoining internal bottom/top margins of twenty and thirty <CSS pixels> can still give a thirty-pixel separation. Establishing a context is therefore not a universal switch disabling <CSS margin collapsing>.<CSS Display Module Level 3 by World Wide Web Consortium>[Appendix A, margins across formatting-context boundaries]{ref}<Visual formatting model in CSS 2.2 by W3C>[§9.4.1, adjacent internal margins]{ref}
Finally, <CSS flow-root> itself does not request clipping or a scrollbar. Treat formatting isolation, <CSS containing block> geometry and <CSS overflow> as separate properties of the layout.
Back to article page
