Techniques to clear floats in CSS

Using floats in CSS is a common thing Web designers or markup coders do to align the elements in the markup. But it’s a bit tricky if you’re a CSS beginner or using floats for the first time. What is that tricky part? Let’s get into it.

When an element in the markup 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 flow and alignment of elements in the layout markup.

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

Such breaking of flow and alignment in the markup can be fixed using some handy CSS techniques which we’ll be discussing next throughout the article.

A short note: It is assumed that you use at lest the float: left; property in the class left-floated-div, and float: right; in .right-floated-div in your CSS. Also, you can give any suitable name to the clear or group classes according to you, for eg. clearfix or anything which is in your practice.

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 clear element to clear floats of the siblings. The clear element is generally 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

Clearing floats of all children 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. It retains the developer from adding 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.

CSS for the parent

.group:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

Markup to clear float through parent

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

Implementation

Hope you find this useful. Feel free to ask a question or share your techniques to clear floats. Thanks