CSS Clearfix: What It Is and How It Fixes Float Layouts

You will learn why CSS floats can cause a parent container to appear to have no height, how a clearfix fixes that problem, and which modern layout tools usually make clearfix unnecessary.

A clearfix is a CSS technique that makes a container include the height of its floated children.

Historically, CSS developers used float: left or float: right to place elements side by side, such as columns, images, and navigation links. A floated element is removed from the normal document flow. This means its parent may act as though the floated child is not there.

For example, if a parent contains only floated children, the parent can collapse to a height of 0. Its background, border, and spacing may disappear, and the next section can move upward as if the floated layout did not exist.

A clearfix adds an invisible element after the floated content. That element uses clear: both, forcing it to sit below left- and right-floated elements. Because the invisible element is in normal flow, the parent expands to contain it.

Clearfix was especially common in older float-based layouts. It is not specifically an IE6 feature, although old Internet Explorer compatibility hacks were sometimes included in clearfix implementations. Today, use Flexbox or CSS Grid for most layouts instead of floats. Clearfix is still useful when maintaining older code or when text needs to wrap around a floated image.

Think of a parent container as a box holding objects.

Normally, every object takes up space in the box, so the box grows tall enough to hold them. A floated element is like an object that is visually inside the box but is not counted when measuring the box's height.

A clearfix is like placing a small, invisible marker at the bottom of the floated objects. The marker is counted by the box, so the box stretches down to the correct height.

The common modern clearfix uses a pseudo-element:

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

Apply the class to the parent of floated elements:

<div class="profile clearfix">
  <img class="avatar" src="avatar.jpg" alt="A user avatar">
  <p>
    This paragraph wraps beside the image because the image is floated.
  </p>
</div>

<section class="next-section">
  This section should begin below the entire profile box.
</section>

.profile {
  border: 2px solid #4b5563;
  padding: 16px;
  background: #f3f4f6;
}

.avatar {
  float: left;
  width: 96px;
  height: 96px;
  margin-right: 16px;
}

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

.next-section {
  margin-top: 16px;
  padding: 16px;
  background: #dbeafe;
}

The ::after pseudo-element is generated as the last child of .profile. clear: both prevents it from sitting beside either a left or right float, so it moves below the floated image and gives .profile the required height.

An older alternative is to add a real clearing element:

<div class="container">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
}

This works, but it adds markup solely for presentation. The pseudo-element clearfix keeps that presentational detail in CSS.

Consider two floated cards inside a parent:

<div class="cards clearfix">
  <article class="card">Card one</article>
  <article class="card">Card two</article>
</div>

<p class="notice">Content after the cards</p>

.cards {
  border: 3px solid tomato;
  padding: 12px;
}

.card {
  float: left;
  width: 45%;
  padding: 20px;
  margin-right: 2%;
  background: #fde68a;
}

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

Execution sequence:

1. The browser creates the .cards container and applies its border and padding.
2. Each .card is floated left, so the cards appear side by side when enough horizontal space exists.
3. Because floated cards are outside normal flow, .cards would not normally calculate its height from them.
4. The browser generates the .clearfix::after pseudo-element after both cards.
5. clear: both requires that pseudo-element to be positioned below all left and right floats.
6. The pseudo-element is in normal flow, so .cards grows tall enough to include it.
7. The .notice paragraph is laid out after the now correctly sized .cards container.

Without the .clearfix class, the tomato border can appear to wrap only the container's padding instead of the cards. The following paragraph may visually overlap the area where the cards appear.

Clearfix is mainly encountered in existing float-based CSS. Typical uses include:

• Article images: An image floats left or right so text wraps around it. A clearfix can make an enclosing article section include the image's height.
• Legacy navigation bars: Navigation links floated left inside a header need their header to contain them.
• Older multi-column layouts: Two or three floated column elements need a wrapper with a visible background or border.
• CMS themes and older templates: WordPress themes and other long-lived templates often contain .clearfix, .cf, or .group utility classes.
• Maintaining old browser-compatible code: A project may retain float layouts where replacing them would be risky or outside the scope of a small fix.

For a new row of cards, navigation items, or page columns, prefer Flexbox or Grid rather than floats.

In real projects, clearfix is usually defined once as a reusable utility class:

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

display: table is a traditional variant. For clearfix purposes, display: block also works in most cases. The essential declaration is clear: both.

A legacy component might look like this:

<div class="product-summary clearfix">
  <img class="product-summary__image" src="shoe.jpg" alt="Blue running shoe">
  <div class="product-summary__details">
    <h2>Running shoe</h2>
    <p>Lightweight daily trainer.</p>
  </div>
</div>

.product-summary__image {
  float: left;
  width: 140px;
  margin-right: 20px;
}

Developers add the clearfix to .product-summary, the element that must visually surround the floated image.

In new code, a component would more often use Flexbox:

.product-summary {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.product-summary__image {
  width: 140px;
}

Flexbox keeps its children in normal layout flow, so the parent naturally has the correct height and no clearfix is needed.

Applying clearfix to the floated child

The clearfix belongs on the parent that contains floats, not on each floated item.

/* Usually incorrect for containing the cards */
.card.clearfix::after {
  content: "";
  clear: both;
}

/* Correct: the parent must contain its floated children */
.cards.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Forgetting content

A pseudo-element is not generated without content.

/* Broken: no generated pseudo-element */
.clearfix::after {
  clear: both;
}

Use content: "".

Using floats for every modern layout

Floats were designed primarily for text wrapping around content. They can create layout side effects that require clearing. Prefer Flexbox for one-dimensional rows or columns and Grid for two-dimensional page layouts.

Clearing only one direction unnecessarily

If a container can have both float: left and float: right children, use:

clear: both;

clear: left only clears left floats, while clear: right only clears right floats.

Confusing clear with float

• float moves an element to a side and lets surrounding inline content wrap around it.
• clear tells an element not to sit beside preceding floats on a specified side.

Assuming overflow: hidden is always a clearfix replacement

This can contain floats:

.container {
  overflow: hidden;
}

But it may clip dropdowns, shadows, tooltips, or other content that extends outside the container. Do not use it as a default clearfix technique.

A key distinction is that clear: both can be used directly on a specific next element, while a clearfix is a reusable pattern that creates a clearing element automatically after a container's contents.

/* Standard clearfix utility */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<!-- Add it to the parent of floated elements -->
<div class="clearfix">
  <img class="float-left" src="photo.jpg" alt="Example">
</div>

.float-left {
  float: left;
}

• Floated children do not contribute to their parent's normal height.
• A clearfix creates an invisible final child that clears floats.
• Use clear: both when either left or right floats may be present.
• Add clearfix to the container, not normally to each float.
• For new rows, columns, and card layouts, use Flexbox or Grid.
• Floats remain appropriate when text should wrap around an image or similar content.

What is a clearfix in CSS?

A clearfix is a CSS pattern that makes a parent container expand to include floated child elements.

Why does a parent collapse when its children use float?

Floated elements are removed from normal document flow. Because they are not counted in normal flow, a parent containing only floats may calculate no content height.

What does clear: both mean?

It means an element must be placed below any preceding left-floated or right-floated elements.

Is clearfix still needed in modern CSS?

It is needed when maintaining float-based layouts. For new component layouts, Flexbox and Grid normally eliminate the need for it.

Should I use overflow: hidden instead of clearfix?

Usually no. While it can contain floats, it can also clip visible content such as shadows, menus, and tooltips.

Why do some clearfix snippets use display: table?

It is a historical clearfix variant with reliable behavior. display: block is also commonly used; the important part is generating the pseudo-element and giving it clear: both.

Does clearfix fix a layout where text overlaps a float?

It fixes the parent-height issue caused by floats. If a particular following element must start below a float, applying clear: both directly to that following element may be the more direct solution.

• CSS floats — Clearfix exists because floated elements are removed from normal document flow.
• CSS clear property — The clear: both declaration performs the actual clearing work.
• CSS pseudo-elements — Modern clearfix uses ::after to generate an invisible clearing element without extra HTML.
• Normal document flow — Understanding flow explains why a parent may not include its floated children.
• Flexbox — A modern alternative for arranging items in a row or column.
• CSS Grid — A modern alternative for structured rows-and-columns layouts.
• Block formatting contexts — Some CSS properties establish a new formatting context and can contain floats, but have different side effects.