Introduction

Clearfix is the group of CSS techniques used to make a parent element contain floated children instead of collapsing around them. It matters mostly in float-based legacy layouts. In modern CSS, the cleanest answer is often not another clearfix hack at all, but using a newer layout mode or flow-root.

Why clearfix exists

Floats are taken out of normal block flow. That means a parent containing only floated children may behave as though it has no height.

1<div class="gallery">
2  <div class="tile">One</div>
3  <div class="tile">Two</div>
4</div>

1.tile {
2  float: left;
3  width: 120px;
4  margin-right: 12px;
5}
6
7.gallery {
8  border: 2px solid #333;
9}

Without containment, the border on .gallery may collapse because the floated children do not contribute to the parent's normal height.

The classic pseudo-element clearfix

The most common historical solution is a generated pseudo-element that clears the floats:

1.clearfix::after {
2  content: "";
3  display: table;
4  clear: both;
5}

Then apply it to the parent:

1<div class="gallery clearfix">
2  <div class="tile">One</div>
3  <div class="tile">Two</div>
4</div>

This works well because the generated box participates in normal flow and clears the floated elements above it. For broad browser compatibility in legacy code, this is still the standard utility-class answer.

The extra markup approach

An older method is to insert a clearing element in the HTML:

1<div class="gallery">
2  <div class="tile">One</div>
3  <div class="tile">Two</div>
4  <div class="clear"></div>
5</div>

.clear {
  clear: both;
}

This works, but it mixes layout repair markup into the document structure, which is why pseudo-element clearfix became more popular. It solves the same problem with cleaner HTML.

The overflow technique

Another historical trick is to create a new block formatting context with overflow:

.gallery {
  overflow: auto;
}

or:

.gallery {
  overflow: hidden;
}

This often contains floats successfully, but it has side effects. Scrollbars, clipped shadows, clipped dropdowns, or clipped absolutely positioned children can appear. So overflow is not a universal clearfix. It is a containment technique with tradeoffs.

The modern CSS answer is often flow-root

If you still have float-based markup but want a clean containment rule, display: flow-root is usually the best modern option:

.gallery {
  display: flow-root;
}

flow-root creates a new block formatting context intentionally, without using overflow as a side effect. In many modern browsers, this is the most straightforward float-containment rule you can write.

Sometimes the best clearfix is to stop using floats

A lot of historical clearfix problems disappear when the layout is rewritten with Flexbox or Grid.

1.gallery {
2  display: flex;
3  gap: 12px;
4}
5
6.tile {
7  width: 120px;
8}

This is not technically a clearfix method. It is a layout change. But for new UI work, that is often the best answer because the need for clearfix came from using floats for layout in the first place.

So the practical rule is:

• keep clearfix or flow-root when maintaining float-based legacy code
• prefer Flexbox or Grid for new layouts

Choosing the right method

Use the pseudo-element clearfix when you need a classic, compatible utility class. Use overflow only when its clipping or scrolling behavior is acceptable. Use flow-root when you want clean containment in modern CSS. Use Flexbox or Grid when you are free to change the layout model.

That choice is less about memorizing hacks and more about understanding why the parent is collapsing in the first place.

Common Pitfalls

The most common mistake is using overflow: hidden as a generic clearfix and then accidentally clipping content such as shadows, menus, or absolutely positioned children.

Another common issue is adding clearfix classes to containers that do not even contain floats. That adds noise without fixing anything.

People also treat Flexbox and Grid as just another clearfix trick, when really they are layout systems that remove the need for float-based hacks altogether.

Finally, when debugging a collapsed parent, verify that floats are actually the cause. A height or positioning bug is not always a clearfix problem.

Summary

• Clearfix exists to make a parent contain floated children.
• The classic method is a pseudo-element with clear: both.
• 'overflow can work, but it has side effects.'
• 'display: flow-root is usually the cleanest modern float-containment rule.'
• For new layouts, Flexbox or Grid is often better than any clearfix technique.