Widely availableA practical utility when you need layout containment for float-heavy or self-contained blocks.
Layout Widely available

display: flow-root

display: flow-root creates a new block formatting context. It is a clean way to contain floats and isolate layout behavior without extra clearfix hacks.

LayoutFlowFormatting context

Overview

display: flow-root creates a new block formatting context. It is a clean way to contain floats and isolate layout behavior without extra clearfix hacks.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.display.flow-root
58
79
53
13
58
13
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Alternative to the clearfix hack */
.container {
  display: flow-root;
}

.container .float-child {
  float: left;
  width: 50%;
}

Live demo

Flow-root(floatinclude)

display: flow-root Flow-root(floatinclude) demo.

PreviewFullscreen

Normal. Block(comparison)

display: flow-root Normal. Block(comparison) demo.

PreviewFullscreen

marginfoldprevention

display: flow-root marginfoldprevention demo.

PreviewFullscreen

Use cases

  • Float containment

    Contain floated children without pseudo-element clearfix patterns.

  • Self-contained blocks

    Create isolated blocks whose internal layout should not leak into surrounding content.

Cautions

  • flow-root solves formatting-context issues, but it is not a substitute for choosing a more modern layout system when appropriate.
  • Use it intentionally so future readers understand why containment is needed.

Accessibility

  • flow-root mainly affects layout, but the resulting clearer structure can reduce overlap bugs that hurt readability.

Related links

Powered by web-features