clearflow – another way to clear floats in CSS

A new way to clear floats using CSS. If you’re not a web developer, you might find this post a bit pointy-hatted. This is a refined method of clearing floats using CSS without additional html markup, based on the work of some great people.

4-30-08 This is a first-draft and will be updated based on feedback and further research. Until further notice, please be advised against using the “clearflow” method I describe below in production web sites until people with higher IQs than just me have validated this. I can’t take responsibility for things that break if you use this right now. That being said, please read on and provide feedback, either good or bad.

I normally don’t intend on writing how-to types of guides here on Trending, but I’m making a special exception here.

Background

The W3C-recommended way to clear floated elements in CSS is by adding extra markup after your floated elements to clear them. For example:

<div>
<div style=”float:left;border:1px solid #000″>float left</div>
<div style=”float:right;border:1px solid #f00″>float right</div>
<div style=”clear:both”></div>
</div>

A pure CSS solution was created by Tony Aslett from csscreator.com and documented at Position Is Everything as given here:

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

In a recent followup that PIE links to here , the article roughly describes using the CSS “overflow:auto” property to clear floats in most browsers. There are a couple of issues with this method, as it can make scrollbars appear haphazardly depending on the size of your content.

The “clearflow” method for clearing floats

The “clearflow” technique is based around the same concept of using “overflow” to clear floats. If you do a few quick Google searches, people have mentioned this as an alternative for a few years, but as far as I can tell no one has quite done this combination before.

This is very much still a work in research. It has been tested against all the major modern browsers but very little against older browsers, essentially anything older than IE6. I have used this method to replace clearfix on internal development versions of several sites that I work on and have so far not seen any differences.

So, on to the code:

<style>

.clearflow{
overflow:hidden;
zoom:1;
word-wrap:break-word;
}

</style>

Tested in Firefox 2.0.0.14, Firefox 3.0.x beta, IE6, IE7, IE8 beta, Safari 3.1, Opera 9.27

To use this, apply “clearflow” as a class declaration on element containing your floated elements.

<div id=”container” class=”clearflow”><!– floated elements exist in here –></div>

Pros:

  1. We’re not using IE-specific hacks any more. The CSS is cleaner and not reliant on standard selectors that work in some browsers and not others (read, IE6).
  2. overflow:hidden
    • Triggers float clearing in Firefox/Safari/Opera.
    • Firefox and Opera do not support “word-wrap:break-word” yet. It hides overflowing text, which is a widely-used CSS method for handling this issue.

  3. zoom:1
    • Triggers hasLayout in IE6 & IE7.
    • Does not require setting width or height to trigger hasLayout. This potentially makes the technique more versatile for layout design.

  4. word-wrap:break-word
    • Provides automatic word wrapping in IE6, IE7, and Safari.
    • Is an upcoming property being supported in CSS3. Firefox and Opera do not currently support this property but will eventually. Future-proof, if you want to use the term.

Caveats:

  1. “zoom” is an IE-only property. It does not validate, and is not part of the CSS 2.1 or CSS 3 specs.
  2. “word-wrap” is not part of the CSS 2.1 spec. It currently will not validate. It is currently supported by IE and Safari, and will be supported by FF and Opera eventually.

If you want to make this technique fully validate, you can put the “zoom:1” property into an IE-specific stylesheet like this:

<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>


Take-aways:

My belief for now, after having done my own testing across the main A-grade browsers, is that “clearflow” represents a cross-browser, almost-standard method to clear floated elements. Visually, it is much cleaner code than even the “clearfix” method we have all been using. The “zoom” property isn’t a CSS standard, though it is better than using an IE-specific browser hack. For the purists among us, we can even extract “zoom” into an IE-specific stylesheet.

Being one person, I haven’t had the time resources to validate this method against every possible layout schema. I would like to encourage anyone interested in testing the “clearflow” method to try it on their own test sites and find the holes and bugs that are sure to exist. I will update this guide, and even go so far as to invalidate this idea, as other people have an opportunity to review “clearflow” and provide feedback.

Please leave your comments and critiques below. Thanks for reading!

4 thoughts on “clearflow – another way to clear floats in CSS

  1. The “overflow:hidden;” rule is a problem. When the inner contents are linked directly from anchors (ex. <a href=”#hash” …) it will shift the content out of view.

Leave a Reply

Your email address will not be published. Required fields are marked *