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!