Bailing Your Boat: Clearing Problem Floats

Please note: this article is ancient. In most cases, the problems with floats are solved due to the fact that in most cases where we used floats back when I wrote this, we would now use flexbox or grid. CSS Tricks has great articles on both grid and flexbox. Start there unless you already know all that and still have a problem float you’re trying to solve. Then this article might conceivably still be of some use.

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:

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.

Float Your Boat Gently Down the Stream: the case of normal floats. Merrily, merrily, merrily, floats are but a dream

To my right is a sort of title box like when magazines excerpt something. I’m not floated. Im’ just regular old text about floats.

Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream. Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream.Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream.Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream.Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream. Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream.Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream. Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream.Row row row your boat, gently down the stream, merrily merrily merrily life is but a dream.

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?

I’m tall and floated left. Row row row your boat, gently down the stream. Row row row your boat, gently down the stream. Row row row your boat, gently down the stream (now doesn’t that make more sense than Lorem ispum in a post about floats?)

I’m not floated

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:

I’m tall and floated left. Row row row your boat, gently down the stream. Row row row your boat, gently down the stream. Row row row your boat, gently down the stream (now doesn’t that make more sense than Lorem ispum in a post about floats?)

I’m not floated. I’m not floated. I’m not floated. I’m not floated.

I’ve got clear:both set. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

And the screenshot:

Floated paragraph doesn't respect padding.
Floated paragraph doesn’t respect padding.

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.

I’m tall and floated left. Row row row your boat, gently down the stream. Row row row your boat, gently down the stream. Row row row your boat, gently down the stream (now doesn’t that make more sense than Lorem ispum in a post about floats?)

I’m not floated.

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.

Leave a Comment