35: Floats and clearing

Floats were originally created to allow you to float text beside images, and clearing serves as a way to get subsequent paragraphs to stop floating, if desired. However, these properties have been hijacked somewhat, and are now often used to create multiple column layouts. All of this is discussed in this article.

( Read the article )

Containing floats
As you’ve seen above, the parent box doesn’t normally expand to contain floated children.
[...]
Replace the last rule with this, then save and refresh:

#p1 {
overflow: hidden;
}

Note that [this] method doesn’t work in Internet Explorer 6 or older.

Actually this can be made to work in IE5 & IE6 too: all you have to do is declare a width.

#p1 {
overflow: hidden;
width: 100%;
}

I've used 100% as an example, but you can change that to suit your layout.

There's a more detailed explanation on Quirksmode.

Yes, it looks like another hasLayout issue. If the container has layout, then overflow:hidden works even in IE6. Setting a width isn't always possible, but any trick that makes the container have layout, such as zoom:1, will fix the bug.

1. "float:inheritis"
2. "clear:bothit"
3. "as sene in Figure 5"
4. "clear:bothon"