CSS Clearfix Methods for Floated Layouts

You will learn why floated elements can collapse their parent container, how clearing works, and when to use a clearfix utility, display: flow-root, or a modern layout system such as Flexbox or Grid.

Floats were originally designed to let text wrap around content such as images. A floated element is taken out of the normal block layout flow. As a result, a parent that contains only floated children may calculate its height as zero.

That is why a border, background, or following section can appear to ignore the height of a floated two-column layout.

A clearfix makes the parent contain its floated children. Historically, this was done by inserting or generating a non-floated element after the floats and applying clear: both to it.

For new code, the clearest CSS-only solution for a container whose job is to contain floats is usually:

.container {
  display: flow-root;
}

flow-root creates a new block formatting context, which causes the element to contain its floats without adding extra markup or clipping overflow.

Even better, if you are building a two-column layout today, use Flexbox or CSS Grid instead of floats. Floats remain relevant when text should wrap around an item, but they are no longer the primary layout tool.

Imagine floated elements are boats that leave a dock. The container is the dock, but the boats are no longer standing on it, so the dock cannot measure how much space they occupy.

A clearfix is like placing a final marker back on the dock after all the boats. The marker tells the dock, “do not end until you are below every boat.”

display: flow-root is like giving the dock a built-in rule that says it must always account for its boats. Flexbox and Grid avoid the boat analogy entirely: their columns stay part of the layout system from the beginning.

The traditional CSS clearfix uses a generated pseudo-element after the floated children:

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

Apply it to the parent:

<div class="container clearfix">
  <main class="content">Main content</main>
  <aside class="sidebar">Sidebar</aside>
</div>

.content {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 25%;
}

The ::after pseudo-element is generated as the last child of .container. clear: both forces that generated element below left- and right-floated elements, so the container gains the correct height.

For a float-containing parent, prefer this modern alternative:

.container {
  display: flow-root;
}

It can replace the clearfix class when the container needs to enclose floats.

For a new two-column layout, use Flexbox:

<div class="layout">
  <main class="content">Main content</main>
  <aside class="sidebar">Sidebar</aside>
</div>

.layout {
  display: flex;
  gap: 1rem;
}

.content {
  flex: 1;
}

.sidebar {
  width: 16rem;
}

Flex items remain in layout flow, so no clearfix is needed.

Consider this floated layout:

<div class="container clearfix">
  <div class="content">Article</div>
  <div class="sidebar">Links</div>
</div>

<div class="footer">Footer</div>

.content {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 25%;
}

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

.footer {
  background: lightgray;
}

Execution, step by step:

1. The browser places .content and .sidebar as left and right floats.
2. Because both children float, they do not contribute their normal height to .container.
3. The browser generates .clearfix::after after the two children.
4. clear: both moves that generated pseudo-element below either float.
5. Since the pseudo-element is inside .container, the container now extends down to it.
6. The .footer starts below the correctly sized container instead of overlapping or appearing too high.

Replacing the clearfix rule with display: flow-root on .container produces the same containment result without generating an explicit clearing element.

Float containment is still useful when maintaining older stylesheets or when floats are intentionally used.

• Article images: Float an image left or right so paragraph text wraps around it, while ensuring the article section contains the image.
• Legacy CMS themes: Old themes may use floated navigation, sidebars, cards, or columns that need a clearfix utility.
• Component boundaries: A card containing a floated thumbnail needs its background and border to extend around the thumbnail.
• Mixed old and new CSS: A modern application may retain one floated widget from a third-party stylesheet and contain it with flow-root.

For page-level columns, navigation bars, card rows, and responsive dashboards, Flexbox or Grid is generally a more appropriate choice.

In real projects, developers usually avoid adding presentational markup such as <br clear="all">. Clearing belongs in CSS because it describes layout rather than document content.

A common legacy utility class is:

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

Use it only where floated children must be contained:

<section class="profile-card u-clearfix">
  <img class="avatar" src="avatar.jpg" alt="Sam Lee">
  <p>Sam writes documentation.</p>
</section>

.avatar {
  float: left;
  width: 80px;
  margin-right: 1rem;
}

In maintained codebases, a component-specific rule is often clearer than a generic class:

.profile-card {
  display: flow-root;
}

For new layouts, teams typically define layout components with Flexbox or Grid. This avoids float clearing, makes spacing with gap straightforward, and adapts more naturally to responsive designs.

Adding a clearing <br> element

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
  <br clear="all">
</div>

This can work visually, but the <br> is content markup used only for presentation. It also adds an unnecessary line-break element to the document. Prefer CSS.

Using overflow: auto only to contain floats

.container {
  overflow: auto;
}

This creates a new formatting context and often contains floats, but it also changes overflow behavior. Scrollbars can appear when content exceeds the available space. Use it only when scrolling is actually desired.

Using overflow: hidden without considering clipping

.container {
  overflow: hidden;
}

This can hide box shadows, dropdown menus, tooltips, or content that extends outside the container. It is not a neutral clearfix.

Clearing the wrong element

.sidebar {
  clear: both;
}

Clearing the sidebar changes where the sidebar itself is placed; it does not reliably make the parent contain all floats. Apply containment to the parent via flow-root or a clearfix pseudo-element.

Using floats for a new column layout

Floats require width calculations, clearing, and extra care at smaller screen sizes. Start with Flexbox or Grid for modern columns unless text wrapping around an element is the intended behavior.

Forgetting box-sizing with percentage widths

Two floated columns with percentage widths, padding, and borders can exceed the parent width. A common baseline is:

*,
*::before,
*::after {
  box-sizing: border-box;
}

clear: both and clearfix are related but different:

• Use clear: both on an element that must begin below prior floats.
• Use a clearfix or flow-root on a parent that must expand around its floated children.

/* Best for containing existing floated children */
.container {
  display: flow-root;
}

/* Legacy clearfix utility */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Clear a following sibling below floats */
.next-section {
  clear: both;
}

/* Modern two-column layout: no floats, no clearfix */
.layout {
  display: flex;
  gap: 1rem;
}

• Floated children may not contribute height to their parent.
• Do not use <br clear="all"> for new layouts.
• Do not use overflow: hidden solely as a clearfix if visible overflow is needed.
• Use overflow: auto when you want scrolling, not merely float containment.
• Prefer Flexbox or Grid for new column layouts.
• Use clear: left, clear: right, or clear: both based on which preceding floats must be avoided.

What is clearfix in CSS?

Clearfix is a technique that makes a parent element expand around floated children, usually by adding a generated pseudo-element with clear: both.

Is display: flow-root better than clearfix?

For modern browsers, display: flow-root is usually simpler for containing floats because it needs no extra generated element and does not change overflow behavior.

Why does overflow: auto fix a collapsed float container?

It creates a new block formatting context, which makes the element contain its floats. However, it can also add scrollbars, so it should not be used only as a workaround.

Why is overflow: hidden risky as a clearfix?

It can clip anything extending beyond the container, including shadows, menus, positioned popovers, and focus outlines.

Should I still use floats for two-column layouts?

Usually no. Use Flexbox for a row or column of items and Grid for structured two-dimensional layouts. Use floats primarily when text should wrap around an item.

Does clear: both clear elements before or after it?

It affects the element it is applied to: that element is moved down so it sits below relevant preceding floats.

Can I use a clearfix with both left and right floats?

Yes. Use clear: both in the clearfix pseudo-element to account for floats on either side.

• CSS floats — The original feature that causes the containment issue.
• CSS clear property — Controls whether an element can sit beside earlier floats.
• Block formatting context — The layout behavior created by flow-root and some other CSS properties.
• CSS overflow — Explains why auto and hidden can contain floats but have visual side effects.
• Flexbox — A modern tool for one-dimensional column and row layouts.
• CSS Grid — A modern tool for layouts with rows and columns.
• Pseudo-elements — Used by the traditional ::after clearfix pattern.
• Normal document flow — Helps explain why floated elements do not give their parent normal height.