Using Clearfix to Clear Floats in a Layout

First, let’s review some of the older methods of clearing floats in a layout. In a CSS layout with two or more columns, there is generally some use of float to create the column structure. For the layout to include a footer at the bottom of the page, those floats need to be cleared.

A technique used some time back was to add some element – a br or a div – with a class attached that applied clear:both. This br or div was inserted immediately after the elements that needed clearing. This element added no content, it simply cleared the float (or floats). This works, but it does add an unnecessary element into the HTML content.

Another technique put a clear:both rule in the element following the float (or floats) preceding it. So a footer element might be set to clear:both to move it below any floated elements above it. This works. It puts the clear after the elements that need to be cleared.

Example code for this type of clearing in a two column layout.

<div class="container">
 <header>
 . . .
 </header>
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 <footer><!--clear:both rule applied to footer-->
 . . .
 </footer>
</div>

Clearfix

The .clearfix difference is that the class is applied to the parent element containing the floats. The parent element becomes self-clearing.

An advantage of using .clearfix is that it makes the container div height equal to the tallest of the floated columns enclosed. This gives you options with borders, backgrounds and more, particularly when all of the contained elements are floated.

Using .clearfix generally will require the addition of another wrapper div to the HTML. Here’s a example similar to the one above, but designed for .clearfix. The header and footer elements are outside the wrapper div which contains the floated columns.

<div class="container">
<header>
. . .
</header>
 <div class="wrapper"><!--.clearfix class applied to wrapper-->
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 </div><!--end wrapper div-->
<footer>
. . .
</footer>
</div><!--end of container div-->

The Clearfix Rule

The CSS for a .clearfix class rule is applied to the parent element containing the floats. It uses the pseudo class :after with no content. It declares the element as display:table.

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

That’s it.

2 thoughts on “Using Clearfix to Clear Floats in a Layout

  1. Doesn’t the clearfix class need to be applied to the wrapper?

    Interesting way to deal with floating problems.

    I also use overflow: hidden on the containing element to contain floats, but I think it can have some problems if you are doing some complicated positioning of elements inside the container. It is a bit simpler in the CSS, though.

    • I believe I show that .clearfix should be applied to the wrapper, but as a comment, not in the example code. Is that not clear? I can update it.

      I thought about including overflow in this discussion of clearing floats, but I decided not to. I know it works (with some gotchas), but I wanted to keep the discussion focused mostly on .clearfix.

Leave a Reply