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

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.

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 is floated left.

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

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

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 {
  : block;
  : both;
}

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

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.