My new favourite clearfix

Adding empty <div> elements for purely presentational purposes used to be a necessary evil. The overflow: hidden trick fixed that problem, but raised the obvious issue that anything that flowed over the edge of the element was … hidden. Bad news for our new CSS box shadows. Now, thanks to the work of clever people, there is a really good solution.

The technique uses the :after pseudo-element:

.clearfix:after {
    clear: both;
    content: "";
    display: block;

Now, you can simply add the clearfix class to any elements containing floats. Easy.

For a more detailed explanation and support for old versions of Internet Explorer, see Nicolas Gallagher’s blog.

· Code