Super Clear Redux

The two best CSS clear methods are the overflow: hidden method and the :after method. I try to stick to the overflow: hidden method whenever possible, but in some situations it just doesn’t work—that’s where :after comes in handy.

Super Clear Review

The :after clear method, or Super Clear as I so affectionately refer to it, clears floated child elements. Super Clear is some simple CSS to replace overflow: hidden or the dreaded extra div:

<div class="clear"><!-- --></div>

The Super Clear code looks like this:

parentElement:after {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;

  content: ".";	
  }

Don’t forget the vitamin supplements for the deficient browsers!

The Situation

The above :after code works well in most situations, but there is one situation where it falls apart: the bottom of the page.

As an example, if you are clearing floated columns inside your footer, you may find yourself with some extra space.

If you look in the graphic above you can see the clear code creates extra space at the bottom of the footer. The black on the left should touch the bottom. This bug seems only to occur in Safari and Firefox.

A Simple Fix

The fix is simple, all you need is two extra lines in the CSS.

All together now:

parentElement:after {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;

  content: ".";
  font-size: 0;	
  }

After hours of slaving away trying to solve the problem, it appears that the content: "." was creating the extra space (as it should). All that I had to do was make that extra space as small as possible.

I keep these two extra lines in place every time I use this clear code and they don’t cause any issues further up the page.