Clearing Floats: An Overview of Different clearfix Methods

Share this article

Clearing floats has long been a common necessity in front-end development. It’s no surprise then that over the years, we’ve been exposed to multiple methods for clearing floats, nowadays more commonly known as “clearfix methods”. Before we dig into the various methods, let’s take a look at the problem that clearfix methods attempt to solve.

The scenario: .el-1 and .el-2 are floated side by side inside a .container element, and there’s a .main element after .container.

The desired outcome: We want .container to expand to the height of its child elements (i.e. the taller of either .el-1 or .el-2), and we want .main to be after .container.

The actual outcome: .container collapses and takes on no height at all, as if there is nothing inside it, putting .main in an undesired location and potentially causing any backgrounds or borders on .container to be missing.

Based on the above scenario, our markup may look something like this:

<div class="container">
  <div class="el-1">A long string of stuff here...</div>
  <div class="el-2">A short string of stuff here...</div>
</div>
<div class="main">
  Some stuff here...
</div>

Then our CSS may look something like this:

.el-1, .el-2 {
  float: left;
  width: 50%;
}

.el-1 {
  /* styles for .el-1 here */
}

.el-2 {
  /* styles for .el-2 here */
}

.main {
  /* styles for .main here */
}

Finally, the result is as shown in this demo:

See the Pen Why we need to clear floats by SitePoint (@SitePoint) on CodePen.

By looking at the demo and examining the CSS for the .container element, you’ll see that it is indeed collapsed. You can see a hint of a black border at the top, and there is no sign of the background color. So it doesn’t expand to contain .el-1 and .el-2, thus leaving .main to jump up to an awkward spot (underneath .el-2 in our case).

Contrary to what many might think, this is not a browser bug, or an improper implementation of floats. This is simply how floats work. A lot of times in our development though, this is not our desired outcome. Which brings us to the simple task of having to “clear floats”.

Clearing floats (or clearfixing) basically forces the containing element to expand to contain its child elements. It thus forces the subsequent elements to appear below it. Over the years, many methods have been explored to clear floats. Before we look at these methods, however, let’s first examine the CSS’s clear property, which is one of the primary CSS features we’ll use to help us solve this problem.

The “clear” Property

MDN defines clear like this:

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

From this definition alone, it’s clear why the clear property can clearly clear our floats…right. Now, let’s dig into some methods.

Solution 1: The Old School Way

This method is old school. Old school is relative, and of course the real old school method involves the use of tables for layout (in which case clearing floats means nothing). So consider this method old school as far as the existence of floats goes.

The idea is simple: Insert an empty element that has the clear property declared on it at the bottom of the container of floated elements. It’s long been tradition to use a specific class to achieve this, so that you can reuse it in your HTML. Here’s the classic CSS structure:

.clear {
  clear: both;
}

And the HTML might look like this:

<div class="container">
  <div class="el-1">I'm floated...</div>
  <div class="el-2">I'm also floated...</div>
  <br class="clear">
</div>

<div class="main">
  Bravo, sirs and madams. I'm in the clear.
</div>

And here is our demo with this method implemented:

See the Pen Old school float clearing by SitePoint (@SitePoint) on CodePen.

Note: If you don’t care about the collapsed container, and only about the mis-positioned .main element, then you could also choose to place the “cleared” element after the container. But if you choose to do that, then you might as well just put the clear: both declaration on the .main element itself.

This method was the go to method once upon a time. It works, plain and simple. However, in these modern times of separating content from style, and trying to keep things as semantic as possible, this method is generally frowned upon by many.

Method 2: The Overflow Way

Using the overflow property on our .container, we can actually force the container to expand to the height of the floated elements. Our CSS will look like this:

.container {
  overflow: hidden; /* can also be "auto" */
}

And our HTML would remain as it was originally, with no extra elements.

Here’s the demo:

See the Pen overflow: hidden/auto float clearing by SitePoint (@SitePoint) on CodePen.

As you can see, our .container expands to the height of our floated elements, background colours, borders, and background images will fill it up if applied, and all is well.

However, one of the main drawbacks of this method is the fact that any child content that pokes outside the container element is going to either get clipped (assuming a value of hidden) or is going to cause scrollbars to appear (assuming a value of auto). Better than our previous solution, but still far from ideal. Let’s dig further.

Method 3: The “clearfix” Class

You hear about it often, but what is it? All the cool kids are using it, and you want to also. The “clearfix” (which means fixing the clearing of floats) defines a .clearfix class in our stylesheet that we can apply to any float-containing element. This will force the container element to expand, pushing subsequent elements beneath it. How does it work? It uses the awesome CSS pseudo-elements ::before and ::after. Nicolas Gallagher describes it pretty neatly:

This … generates pseudo-elements and sets their display to table. This creates an anonymous table-cell … The :after pseudo-element is used to clear the floats. As a result … the total amount of code needed is reduced.

The CSS looks like this:

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}

And our HTML would be modifed slightly to look like this:

<div class="container clearfix">
  <div class="el-1">I'm floated...</div>
  <div class="el-2">I'm also floated...</div>
</div>

<div class="main">
  Bravo, sirs and madams. I'm in the clear.
</div>

And here is our demo once again with the clearfix added:

See the Pen Float clearing with micro clearfix by SitePoint (@SitePoint) on CodePen.

And take note that Chris Coyier advises that if you don’t need to support anything below IE8, you could get by with just the following:

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

Simple, effective, semantic, and easily reusable.

Note: The method used above is the “micro clearfix”, as popularized by Nicolas Gallagher. The only difference is the class name that Nicolas uses. Previous to that method, there were similar techniques as described by Peter-Paul Koch and Thierry Koblentz. Basically, the clearfix has a pretty long history and the method we’re using above is the latest iteration.

Method 4: The Future contain-floats Value

Interestingly, the W3C specification has added a new value to the min-height property (and to other min/max properties), in order to help solve this problem. It looks like this:

.container {
  min-height: contain-floats;
}

This basically will do the same thing as the clearfix or the overflow method, but with a single line of code and without any of the drawbacks we’ve discussed. And of course, you could create a separate reusable clearfix class that this could be attached to, and just use it once in your CSS.

It doesn’t appear that any browser supports this value as of yet, but it’s certainly something to keep an eye on.

Wrap Up

And there you have it, folks, a quick run-through of various “clearfix” methods. The application of the .clearfix class has become the standard, and I highly recommend using that instead of the previous two methods. It just makes life easier. Of course, whatever works best for you will always do the trick, but, as mentioned, I’d advise staying away from method 1 these days and sticking for the most part to the standard clearfix hack.

Frequently Asked Questions (FAQs) about Clearing Floats and Different Clearfix Methods

What is the purpose of using a clearfix in CSS?

A clearfix is a method used in CSS to ensure that a parent element fully encloses its floated children. This is necessary because, by default, a parent element collapses around floated elements, which can lead to layout issues. The clearfix method forces the parent element to expand to contain the floated elements, maintaining the integrity of the layout.

How does the clearfix method work?

The clearfix method works by applying a pseudo-element to the parent element. This pseudo-element is styled with the ‘clear’ property set to ‘both’, which forces it to clear both left and right floats. This causes the parent element to fully enclose the floated elements.

What are the different methods of applying a clearfix?

There are several methods of applying a clearfix. The most common method is to use the ‘:after’ pseudo-element with the ‘clear’ property set to ‘both’. Another method is to use the ‘overflow’ property set to ‘auto’ or ‘hidden’. This method can cause issues with margins and is not recommended for general use. A third method is to use the ‘display’ property set to ‘table’, which can also cause layout issues and is not recommended.

When should I use a clearfix?

You should use a clearfix whenever you have a parent element that contains floated elements and you want to ensure that the parent fully encloses the floated elements. This is often necessary in multi-column layouts where you want to ensure that the columns do not overlap or cause other layout issues.

Are there any drawbacks to using a clearfix?

The main drawback to using a clearfix is that it can add complexity to your CSS. It requires you to add additional styles to your parent element, which can make your CSS more difficult to maintain. However, the benefits of using a clearfix often outweigh this drawback, as it can prevent serious layout issues.

Can I use a clearfix with flexbox or grid layouts?

Flexbox and grid layouts have built-in methods for handling the issues that a clearfix solves, so you typically do not need to use a clearfix with these types of layouts. However, there may be specific situations where a clearfix is still useful, so it’s a good tool to have in your CSS toolkit.

How can I apply a clearfix to a specific element?

To apply a clearfix to a specific element, you can create a CSS class with the clearfix styles and then apply that class to the element. For example, you could create a class called ‘.clearfix’ and then apply it to an element like this: ‘

‘.

Can I use a clearfix with Bootstrap?

Yes, Bootstrap includes a clearfix utility that you can use to clear floats. To use it, simply add the ‘.clearfix’ class to the parent element.

What is the difference between ‘clear’ and ‘clearfix’?

The ‘clear’ property in CSS is used to specify which sides of an element other floating elements are not allowed to float. On the other hand, ‘clearfix’ is a method used to make a parent element fully enclose its floated children.

Is clearfix still relevant with modern CSS layout techniques?

While modern CSS layout techniques like flexbox and grid have largely eliminated the need for clearfix, it’s still a useful tool to have in your toolkit for dealing with older browsers or specific layout situations. It’s also still widely used in many CSS frameworks, like Bootstrap.

Nick SalloumNick Salloum
View Author

I'm a web designer & developer from Trinidad & Tobago, with a degree in Mechanical Engineering. I love the logical side of the web, and I'm an artist/painter at heart. I endorse progressive web techniques, and try to learn something every day. I try to impart my knowledge as much as possible on my personal blog, callmenick.com. I love food, I surf every weekend, and I have an amazing creative partnership with fellow mischief maker Elena. Together, we run SAYSM.

clear floatsclearing floatscollapsed containercss clearfixmicro clearfix
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week