What Is a Clearfix in CSS? Understanding Float Clearing and Layout Behavior

By the end of this page, you will understand what a clearfix is, why floated elements can cause their parent container to collapse, and how a clearfix fixes that problem. You will also see practical CSS examples, common mistakes, and how this concept appears in real codebases.

In CSS, a clearfix is a technique used to make a parent element properly contain its floated children.

To understand why this is needed, you first need to know how floats work.

When an element is floated with CSS like this:

float: left;

that element is taken out of the normal document flow. It still appears on the page, and surrounding content wraps around it, but its parent may no longer calculate its height based on that floated child.

That can lead to a common layout bug:

• the child elements are visible
• but the parent container appears to have height: 0
• backgrounds, borders, and spacing on the parent may disappear or behave incorrectly
• content below may slide upward and overlap the floated layout

A clearfix solves this by forcing the parent to acknowledge the floated children again.

A common modern clearfix looks like this:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

This works by inserting an invisible pseudo-element after the floated children. The clear: both; part tells the browser that this generated element must sit below left and right floats. As a result, the parent expands to include the floated children.

Why it matters:

• older layouts often relied heavily on floats
• many existing codebases still contain float-based components
• understanding clearfix helps you debug collapsed containers
• even though modern layouts usually use Flexbox or Grid, you will still encounter clearfix in legacy CSS

Today, clearfix is mostly a legacy float-fix technique, but it remains important for understanding how CSS layout evolved.

Imagine a parent container as a box that should wrap around everything inside it.

Normally, if you place items in the box, the box grows to fit them.

But floated elements act a bit like balloons tied near the box instead of resting inside it. You can still see them, but the box does not fully count them when deciding its height.

So the box may look empty even though visible items are there.

A clearfix is like placing a small invisible marker at the bottom that says:

"This box must extend below all floating items."

That invisible marker makes the parent box stretch to the correct height again.

The classic idea of clearfix is: after the floated children, add something that clears the floats.

Basic float layout without clearfix

<div class="container">
  <div class="box">Left</div>
  <div class="box">Right</div>
</div>
<p>This paragraph may move up underneath the floated boxes.</p>

.container {
  border: 2px solid steelblue;
  background: #eef6ff;
}

.box {
  float: left;
  width: 100px;
  height: 60px;
  margin: 10px;
  background: coral;
}

What happens?

• Both .box elements float left.
• The .container may collapse because it does not count the floated children for height.
• The paragraph below can rise up and appear too close or overlap visually.

The same layout with clearfix

<div class="container clearfix">
  <div class="box">Left</div>
  <div class="box">Right</div>
</div>
<p>This paragraph now sits below the container correctly.</p>

.container {
  border: 2px solid steelblue;
  background: #eef6ff;
}

.box {
  float: left;
  width: 100px;
  height: 60px;
  margin: 10px;
  background: coral;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Why this works

The ::after pseudo-element is created after the floated boxes. Because it has clear: both, it moves below the floats. That forces the parent .container to expand enough to include the floats.

Older clearfix variations

You may also see older versions such as:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

or old browser hacks designed for IE6/IE7. In modern CSS, the pseudo-element approach is usually enough when working with old float-based layouts.

Consider this HTML and CSS:

<div class="card clearfix">
  <img src="avatar.png" alt="Avatar" class="avatar">
  <p>Hello there</p>
</div>

.card {
  border: 1px solid #999;
  padding: 10px;
}

.avatar {
  float: left;
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Step by step

1. The browser creates the .card element.
2. Inside it, the image .avatar is floated left.
3. Because the image is floated, it is removed from normal flow.
4. The paragraph text wraps beside the image.
5. Without clearfix, the parent .card might not fully expand to include the floated image.
6. The ::after pseudo-element is inserted after the content.
7. clear: both tells that pseudo-element to sit below any floats.
8. Since that pseudo-element is inside .card, the card must extend downward far enough to include it.
9. The result is that .card now has the correct height.

Visual result

Without clearfix:

• the border may not wrap around the floated image correctly
• the next element below may shift upward

With clearfix:

• the border surrounds the whole content
• spacing below the card behaves correctly

Clearfix was commonly used in real websites when float-based layouts were standard.

Common situations

• Image and text blocks: a floated image thumbnail next to article text
• Navigation menus: horizontal menu items floated left inside a nav container
• Grid systems: columns floated left inside a row container
• Media objects: avatars or icons floated next to text content
• Card layouts: multiple small floated boxes inside a wrapping section

Example: floated columns

<div class="row clearfix">
  <div class="column">Sidebar</div>
  <div class="column">Main content</div>
</div>

.column {
  float: left;
  width: 50%;
}

Without clearfix, the .row container may collapse. With clearfix, the .row correctly wraps around both columns.

Why this still matters

Even though modern projects often use Flexbox and Grid, you may still need to:

• maintain older websites
• understand CSS framework internals
• debug layout issues in legacy code
• read tutorials or snippets written before Flexbox became standard

In real codebases, clearfix is usually used as a utility class.

Common pattern

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Then developers apply it wherever a container has floated children:

<div class="profile clearfix">
  <img class="avatar" src="user.jpg" alt="User photo">
  <div class="bio">...</div>
</div>

Typical usage patterns

• Utility classes: one reusable .clearfix class shared across many components
• Legacy grid rows: each row clears floated columns
• Guarding old components: if a component contains floats, a clearfix is added to prevent collapse
• Framework support: older CSS frameworks included clearfix helpers because floats were used for columns and alignment

Related patterns developers use instead

In many modern projects, developers avoid clearfix by using:

• display: flow-root; on the parent
• Flexbox for horizontal alignment
• CSS Grid for multi-column layouts
• overflow: auto; or overflow: hidden; in some cases, though that can have side effects

Practical takeaway

If you see .clearfix in a codebase, it usually means:

• the layout uses floats
• the parent needs help containing floated children
• the code may be older or designed for compatibility with older layout patterns

1. Thinking clearfix is only for Internet Explorer

It became famous partly because of older browser issues, but the core problem is not just an IE problem. It comes from how floats interact with normal flow.

2. Applying clearfix to the floated child instead of the parent

Broken idea:

.box.clearfix::after {
  content: "";
  clear: both;
}

Usually, the clearfix should go on the parent container that needs to wrap around floated children.

Correct idea:

<div class="container clearfix">
  <div class="box"></div>
  <div class="box"></div>
</div>

3. Forgetting content: "" on the pseudo-element

Broken code:

.clearfix::after {
  display: block;
  clear: both;
}

Without content, the pseudo-element may not be generated.

Correct code:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

4. Using clearfix when floats are not the right tool

If you are building a new layout, Flexbox or Grid is often a better choice.

5. Using overflow: hidden as a fix without understanding the side effects

This can contain floats, but it may also:

• clip shadows
• hide dropdowns
• cut off absolutely positioned content

6. Confusing clear with clearfix

• clear is a CSS property used on an element
• clearfix is a pattern or utility class that often uses clear: both internally

Clearfix vs flow-root

If you are writing modern CSS, this is often simpler:

.container {
  display: flow-root;
}

This tells the browser to create a new formatting context, which causes the parent to contain floats without needing a pseudo-element.

Clearfix vs Flexbox

Instead of floating columns:

.column {
  float: left;
  width: 50%;
}

You would often write:

.row {
  display: flex;
}

.column {
  flex: 1;
}

Flexbox is usually easier for modern horizontal layouts, but clearfix is still useful when reading or maintaining old CSS.

Quick definition

A clearfix is a CSS technique that makes a parent element contain its floated children.

Why it is needed

• Floated elements are removed from normal flow.
• Their parent may collapse in height.
• Borders, backgrounds, and spacing may break.

Common clearfix

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Typical usage

<div class="container clearfix">
  <div class="item"></div>
  <div class="item"></div>
</div>

Key property

clear: both;

This forces an element below left and right floats.

Modern alternative

.container {
  display: flow-root;
}

When to use

• mainly in legacy float-based layouts
• when maintaining older CSS
• when a parent does not wrap floated children

When not to use

• for new layouts where Flexbox or Grid is better

Common warning signs

• parent background disappears
• parent border has zero height
• next element overlaps or moves upward

What is a clearfix in simple terms?

A clearfix is a CSS trick that makes a container expand to include floated elements inside it.

Why do floated elements break the parent height?

Because floats are removed from normal document flow, the parent often does not count them when calculating height.

Is clearfix still used today?

Mostly in older or legacy CSS. Modern layouts usually use Flexbox, Grid, or display: flow-root instead.

What does clear: both mean?

It means the element must appear below any left-floated or right-floated elements before it.

Can I use overflow: hidden instead of clearfix?

Sometimes, yes, but it can clip content like shadows or dropdowns. It is not always the best choice.

What is the modern replacement for clearfix?

A common modern replacement is:

display: flow-root;

Should I learn clearfix if floats are old?

Yes. You will still encounter floats and clearfix in older codebases, interview questions, and CSS debugging.

• CSS floats — Clearfix exists because floated elements are removed from normal flow.
• clear property — Clearfix usually works by applying clear: both to a generated element.
• Normal document flow — Understanding normal flow helps explain why parents collapse around floats.
• Block formatting context — Clearfix and flow-root both relate to how layout contexts contain floats.
• display: flow-root — A modern way to contain floats without the classic clearfix pattern.
• Flexbox — A modern layout system that often replaces float-based layouts.
• CSS Grid — Another modern layout tool that avoids the need for float clearing in many designs.