Clearing or containing elements with class="clearfix"

I've had more than one engineer ask, "what is the CSS class 'clearfix'?"

Short answer:

It's an easy way to make sure floated content is contained by its container (when you want it to). It's cross-browser friendly and it prevents the need to start floating everything and their parents which can lead to other issues. See the attached file for a live example.

 

You don't need to go crazy and start adding class="clearfix" to everything. Just add it only to parent elements that need to contain floats where content coming after but sibling to that parent needs to clear the floats.

Long answer:

Floats are meant to break out of their parent container and ancestors on purpose, allowing for text or other sibling or descendent content to wrap something like an image. But as is often the case, UI designers want subsequent content to clear that float for the purpose of controlled layout and predictability. There are many ways to achieve this:

  • Adding extraneous elements like <div style="clear:both"> </div> or an HR or BR with styles applied. Drawbacks: code bloat; non-semantic markup; easy to disassociate with the floated element in the markup.

  • Add clear:left; to the next element (sibling to the float or sibling to the float's parent). Drawbacks: that will make that element clear all floats (including ones you don't want it to); can easily be disassociated with the original float context in the markup.

  • Start floating everything. Drawbacks: This creates more layer-caked problems; it's compounded by IE on Windows (up until, but not including IE8) with its hasLayout rendering property (see technical answer).

  • Rely on a class name with browser targeted properties in CSS fix. This is our rock star …

Technical answer (see attachment):

Floats, as mentioned, are meant to break out of their parent containers. When we want a subsequent item to clear that float, what we really want is the float or floats to be contained by its parent element and not break out. With one class="clearfix" on a parent element (the CSS definitions for which have been added to jive-global.css as of 2.0) we can achieve that.

 

For compliant browsers (any modern browser that is not IE, and IE8), we do that with generated content, this is future proof as it's also standards compliant. For IE on Windows (below IE8) we do that with targeted CSS hacks that are ignored by modern browsers, giving it the mysterious, completely non-compliant property of hasLayout. The mumbo jumbo black magic of hasLayout is just nasty nasty and nasty. It's responsible for or related to all kinds of bugs in IE Windows. For the best explanation in existence on hasLayout, see http://www.satzansatz.de/cssd/onhavinglayout.html. We can even target the other dead IE, IE mac, and give it its own CSS fix; but it's not really needed for CS support.

 

Here's the CSS definitions:

* for compliant browsers */
.clearfix:after {
    clear: both; 
    content:".";
    display: block;
    height: 0;
    visibility: hidden
    }
/* affects only IE7 */
.clearfix {
    min-width: 0;
    }
/* targets only IE5-6 and hidden from lowly IEmac \*/
    * html .clearfix { height: 1%; } 
/* end hide IEmac */
/* What? You want to get crazy and do IEmac too? Okay. \*//*/
    .clearfix { display: inline-table; } 
/* end IEmac only */

 

EDIT: I realized I never attached the example HTML file.