How to Use a Clearfix

How to Use a Clearfix Articles

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!

Advertisement


Leave a Comment

Pingbacks (1)

Advertisement

Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.