4

How to Use a Clearfix

Why and How to Use a Clearfix

You need to use a clearfix when you start floating elements, as the height of the parent will disappear and could potentially mess up your entire layout.

The HTML

A container, .content, with two floated divs, .left and .right.

<div class="content clearfix">
    <div class="left">
        <p>Some Content</p>
    </div>
    <div class="right">
        <p>Some Content</p>
    </div>
</div>

The CSS

Floating the content creates the classic height-break in the parent container. This can be avoided by using a specific height, however that is neither practical nor dynamic.

Simply have a class with display:block; and clear:both;, (we set it to :before so it acts as its own element in the style, otherwise the .clearfix values would overwrite the .content values).

We also set the content:''; to blank so it actually shows up, (pseudo elements such as :before and :after don’t display without the content:; value).

.content {
    background:#ddd;
}

    .left {
        float:left;
    }

    .right{
        float:left;
    }

.clearfix:after{
    display:block;
    clear:both;
    content:'';
}

If you’d like some more quick-tips then have a look at all our short code snippets!

Follow IP on Twitter Like IP on Facebook

Advertisement