Blogless

On this fine July morning, like to just take a moment of your time to eulogize what is, as far as I’m concerned, the most useful CSS trick I’ve ever run across. I’ve used this about five hundred times in my life, and I wanted to take the opportunity to address it to you, good reader, as if by some chance you haven’t yet run into it.

I’ve chosen this opportunity, partially, because trend leader 37signals announced last week that they’re dropping support for IE6 in their products. Which, in my immediate (albeit short-lived) joy, caused me to imagine a world where we could all stop supporting IE<=6, and, subsequently, in which this trick would become even more elegant and universal.

This trick was introduced to us all under the sign of How To Clear Floats Without Structural Markup. It is a trick developed by Tony Aslett and published at Position is Everything.

It makes it possible to clear floats without any unnecessary, unsemantic or hacky structural markup.

In other words, the W3C recommendation for clearing floats always involves some HTML, in the form of something like <br style=”clear: both;” />. But, thanks to this clever piece of CSS magic, our HTML can be clean of these semantically-null elements. Without further ado, I quote:

Using :after

This CSS 2 property allows extra content to be added at the end of an element via the CSS. That means no actual markup is needed in the HTML. The content is specified from within the CSS stylesheet, and appears in the page as would a real HTML element that had been inserted following all the normal content of the target element. Such :after generated content cannot receive some CSS properties, including ‘position’, ‘float’, list properties, and table properties. However, the ‘clear’ property is allowed. Do you see where we are going here?

Imagine that we use :after to insert a simple character like a ‘period’, and then give that generated element {clear: both;}. That’s all you really need to do the job, but no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.

Ain’t it just clever as all get out? Here’s what it looks like:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

You can apply it to any floated element whose elements following you’d like to clear it.

And for those of us who still have to support various generations of Internet Explorer, here’s some of the discussion about accounting for their version-specific idiosyncrasies while using this technique:

1. New clearing method needed for IE7 at 456 Berea Street
2. EasyClearing, the Aslett/PIE way is NOT broken in IE7! at Tanfa
3. Simple Clearing of Floats at Sitepoint