Codectionary / Developer documentation / CSS

Containing Floats with flow-root

flow-root establishes a new block formatting context.

What it is and why to use it

flow-root establishes a new block formatting context. One useful effect is containing the box’s internal floats so its background and border include them. It is a clearer float-containment tool than using overflow solely as an accidental layout fix.

Common mistakes and limitations

A new block formatting context also changes margin-collapsing and float interaction. flow-root does not create a flex or grid layout. Prefer flex or grid when the actual goal is an application layout rather than wrapping text around a float.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="note"><div class="badge">Badge</div><p>A short note beside a floating badge.</p></div>

Syntax

display: flow-root;

Examples

Containing Floats with flow-root

Run the CSS against the supplied HTML, then experiment with the values.

.note { display: flow-root; border: 2px solid #2563eb; padding: 1rem; }
.badge { float: inline-start; width: 5rem; height: 5rem; margin-inline-end: 1rem; background: #bfdbfe; }
  1. The badge floats to the inline start and adjacent text wraps beside it.
  2. flow-root makes the containing note account for its floated descendant in its height.
  3. The border encloses the badge even when the text is short. This is useful for legacy float-based editorial layouts.
HTML used by this example
<div class="demo"><div class="note"><div class="badge">Badge</div><p>A short note beside a floating badge.</p></div></div>

Best practices

  • A new block formatting context also changes margin-collapsing and float interaction. flow-root does not create a flex or grid layout. Prefer flex or grid when the actual goal is an application layout rather than wrapping text around a float.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading