CSS clearing methods

CSS clearing methods - techniques that force a parent container to expand around floated children after those children exit the normal document flow.

#Theory

#TL;DR

• Float removes elements from normal flow, so the parent collapses to 0 height
• The clearfix technique (.clearfix::after) is the standard fix for float-based layouts
• overflow: hidden creates a BFC but clips any position: absolute children that overflow
• display: flow-root creates a BFC with no side effects - the clean modern option
• Flexbox and Grid don't have this problem at all

#Why parents collapse

When you apply float: left or float: right to a child, the browser removes it from normal flow. The parent calculates its height by summing only its in-flow block children. Floated elements don't count. So a container holding nothing but floated divs ends up with height: 0.

The red border below renders as a flat line:

#The clearfix technique

The most widely used fix. Add a ::after pseudo-element to the parent:

Apply the class to the parent, not the floated children:

clear: both positions the pseudo-element below all preceding floats. The parent must then include that element in its height. No extra HTML needed. Bootstrap 3 and 4 used this exact pattern for navbars and media objects.

One thing worth knowing: clear is a CSS property. clearfix is the name of this technique that uses clear inside a pseudo-element. They are not the same thing.

#The overflow method

Any overflow value other than visible creates a new block formatting context (BFC). A BFC must contain its floated descendants, so height collapse stops. Fast to add. But overflow: hidden clips any child with position: absolute that extends outside the container. I've seen this cut off a dropdown tooltip in production - it's a quiet bug that takes time to trace back. Use it only when you're sure nothing needs to overflow.

#display: flow-root

Creates a BFC with no side effects. No clipping, no scrollbars, no pseudo-elements. Supported by all modern browsers since 2018. If you're writing new code that still uses floats (email HTML, for example), this is the right choice.

#When to use each

• Maintaining Bootstrap 3/4 or older WordPress themes: clearfix is already there, keep using it
• Quick fix with no absolutely positioned children: overflow: hidden
• New code that still requires floats (email newsletters): display: flow-root
• New layout work: skip floats entirely and use Flexbox or Grid

#Common mistakes

Adding clear: both to the floated element itself:

clear tells an element where to position relative to preceding floats. A floated element is already outside normal flow, so clearing itself has no effect on the parent's height. The fix belongs on a sibling after the floats, or on the parent's ::after pseudo-element.

Using overflow: hidden when children need to overflow:

Common in older codebases. Clearfix or flow-root avoid this entirely.

Applying clearfix to an inline element:

display: table inside ::after needs a block-level parent to behave correctly. If the target element is display: inline, the layout breaks without any error. Always apply clearfix to block elements.

#Follow-up questions

Q: What is a block formatting context and how does clearing relate to it?
A: A BFC is an isolated layout region where floats are contained and margins don't collapse with the outside. overflow: hidden and display: flow-root create a BFC, forcing the container to include floated children in its height. Clearfix takes a different approach: it injects a block after the floats, which pushes the parent's bottom edge down.

Q: Why does display: table work inside the clearfix ::after?
A: display: table generates a block-level box. That box responds to clear: both, so it positions itself below all preceding floats. As a side bonus, it also prevents margin collapse between the pseudo-element and the container's children.

Q: clearfix vs display: flow-root - which to pick?
A: flow-root is cleaner and has no side effects. Use clearfix only when maintaining a codebase that already has it everywhere, or when you need to support browsers from before 2018.

Q: Does clearfix work inside a Flexbox container?
A: No. Floats are ignored inside flex containers, so there is nothing to clear. Height collapse from floats does not happen in Flexbox.

#Examples

#Basic: parent collapse and the fix

First container: flat red line. Second: full-height border wrapping both blue boxes. The only change is adding clearfix to the parent.

#Real-world: media object (Bootstrap 3 pattern)

Bootstrap 3 source used exactly this pattern for .media components. Without clearfix, <article> collapses to the text height and the image sticks out below the card border.