How to: Clear CSS Floats

Clearing CSS floats was once one of the most annoying things you have to deal with in Web design. In the modern web, there are some handy, short n’ simple techniques (or “hacks”) to clearfix – and we’re going to see all of them right here in this article-cum-tutorial.

What are CSS floats? Why I need to clear them?

It’s for those who are just beginning up with CSS. As the name ‘float’ suggests, floats in CSS are used to float elements left or right. When a markup element is floated, it’s parent (or the container element) stops containing it due the float property which removes it from the flow. This may break the overall alignment and flow of elements in the layout markup.

Take a look at the following example of the alignment collapse caused by floats:

The collapsing of layout flow as shown in the above example produces the need of clearing floats. In the rest of the article, we are going to see what we should do to fix that mess-up.

Clearing floats by adding a clear element

Adding a clear element after the floating element(s) is the most common way people use to clear floats in CSS and you might be implementing this thing in your markup already. In this technique, we basically use a separate clear element to clear floats of the siblings. The clear element is basically used after the floated siblings with no child elements or content in it.

CSS for the clear div

.clear { clear: both; }

Using clear div in markup

<div><!-- Parent or Container Div -->
    <div class="left-floated-div">
        Floated Element 1
    </div>
    <div class="right-floated-div">
        Floated Element 2
    </div>
    <div class="clear"></div>
</div>

Implementation

The above technique has become outdated since experts have coined the micro clearfix – a new hack for clearing floats. But still, you can notice the implementation of above technique in Blogger templates.

Micro clearfix: self-clearing CSS floats through parent

Well, this one is my favorite way to clear floats and I recommend it to others as well. The best part is, it keeps the markup clean and there is no need to add an extra clear element in the markup (like we have done in above technique). The modern day markup experts use this technique to avoid the clutter in the markup.

In this technique, the parent element is given with the properties to clear the floats of all its children. The snippet is brought to you by Nicolas Gallagher.

CSS for the parent

.clearfix:before,
.clearfix:after {
    content: "";
  display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

The Markup

<div class="clearfix"><!-- Parent or Container Div -->
...
...
...
</div>

Implementation

A more neater version of Micro clearfix

We basically name the clear helper class as clearfix. Below is a semantically better version of our micro clearfix class, carrying the name group instead of clearfix that I love to use in my projects.

.group:before,
.group:after {
    content: "";
  display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

That wraps up this article. Feel free to post suggestions, doubts and also share your techniques to clear floats.