The clearfix hack

Current state of the art clearfix hack

The "clearfix hack", a way of clearing floating html elements within a container without an additional clearing element simply by using a CSS class. css-tricks.com maintains a good article about the current state of the art.

Previous versions of the clearfix hack were true cross-browser implementations, some even considering IE for Mac. However with the decline of IE6, IE7 and of course IE-Mac these cross-browser considerations are not that important anymore. Thus the most recent and also most straight forward implementation is simply:

.cf:after {
	content:"";
	display:block;
	clear:both;
}


This creates an empty block element at the end of the container with a clearing attribute. Simple enough. I changed it from display:table; to display:block; since table is only necessary when using :before. But the contenteditable problem in Opera seems to be gone, thus the :before style is not necessary anymore either (see Nicolas Gallagher's micro clearfix).

A test of this clearfix method can be seen in this jsfiddle from my CSS Only Equal Height Columns article.

Last update: 5. Feb 2014

Go back

Add a comment