Bailing Your Boat: Clearing Problem Floats

CSS floats can present some aggravating problems. Most of the problems relate to intelligently clearing a float. What follows are brief descriptions of a few methods for handling the problem.

There is nothing new here. Everything here I got from somewhere else where it is described better and in more detail and with better illustrations. This page is just for my reference.

If you want to go to the source on this, check out these articles:

• Ed Eliot has a nice summary of various clearing methods as well as a browser support chart for each method. The clearest explanation anywhere.
• Phrogz.net has a nice basic overview on understanding floats, but not as in-depth as some others.
• An old article by CSS guru Eric Meyer has an excellent explanation of the way floats work and perhaps the original explanation of the nested float method.
• Smashing Magazine has a comprehensive overview of float tips, including the various clearing methods. This article is pretty heavily linked and will get you to a bunch of other resources.
• Max Design also has a number of CSS float “recipes” (my term).
• Shaun Inman uses absolute positioning and javascript to avoid float idiosyncracies altogether, but that’s a technique best left to the dustbins of history.
• Tony Aslett developed the clearfix:after solution which is also discussed in detail at Position Is Everything. This is broken by IE7 unless you do something to trigger HasLayout.
• Finally, there are several articles from 2005 or so on the overflow:hidden solution. The original idea is actually part of the CSS spec on height and ‘auto‘ and was picked up and publicized by Alex Walker drawing on Paul O’Brien’s wisdom. Further refinements have been offered by Peter-Paul Koch over at quirksmode.org (CSS – Clearing floats). It was also picked up by my old friend Mike Papageorge (Simple Clearing of Floats) and from there was found by the folks at 456 Berea Street (Simple Clearing of Floats).

Normal Floats

So normally, you want a float to have all subsequent text flow around it. That is the expected result and pretty simple as long as the floated text is much shorter than the main text.

Notice how the text wraps right around the box every so nicely?

Problem Floats

But what happens when the floated box is taller than the non-floated element?

It spills out the bottom and would even overrun this text here, except that this paragraph has clear:both.

I could clear the tall grey paragraph and be done. That’s the normal, old fashioned way to do things.

It works, but sometimes it doesn’t actually work that well. For example, here’s the problem that got me digging into this. If this looks right, you’re not using IE, but the screenshot below will show you what happens.

This version is rendered in your browser:

And the screenshot:

See how the floated paragraph doesn’t respect the padding rules? This is an old IE problem and once IE gets up to standard, will likely go away.

Also, the clear: both solution often requires extra markup. That’s a bit inelegant, but more importantly, can be hard to control in some content management systems, so ideally, we would like a solution that is robust and works without extra markup.

Alternative Float Solutions

So if clear:both sometimes has problems, what is one to do?

There are all kinds of hacks and what-not ranging from Shaun Inman’s absolute position and javascript solution to the clearfix:after solution.

The clearfix solution failed in the particular problem I encountered today where the containing element had a border, so forcing a clear is a problem. The Inman solution would work, but I really just didn’t want to add the javascript to the WordPress theme I was fixing up.

The Smarter, Better Way to Float

I stumbled on the slickest way to handle this. It’s an old method, but I had not seen it until recently. It is described much better in the articles I mention in the credits, so if this doesn’t make sense in my disorganized sort of way, go there. Anyway, here it is: the overflow: hidden technique dates back to at least 2005 and appears to be based not on some hack, but on actually writing CSS the way the spec intended.

The spec on height and ‘auto‘ (overflow being an attribute that effect height) states quite directly:

In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges.

That comes from a comment by Anne on the post over at 456 Berea. It’s so simple. You just apply this to the element that contains the floated element:

.floatedElement {overflow:hidden;
height:1%;}

Halleluja! Praise the Lord as only someone who has wasted countless hours on stupid float problems can praise something quite that geeky.

It’s that simple.

A couple of notes

• The reason overflow is hidden is so that you don’t get scroll bars in IE/Mac which otherwise adds scroll bars whether there is any overflow or not.
• You need to set a height or a width to get it to work in IE and Opera. I’ve opted to set a height, since a percentage height is meaningless in most circumstances and doesn’t affect the rest of the layout.
• It’s probably more robust across browsers if you set a width of 100%, but this creates a problem if you are using a standard box model and you have margins, padding and borders.

And now this paragraph is not cleared, but it’s still safe! Hopefully anyway.

Update 2019

This is super old and IE7 is long dead. These days, most leading frameworks (Bootstrap, Foundation, etc), use some variation of the clearfix using the :after pseudo-element and some injected content. That’s probably the best method currently.