What is the proper, standard way to handle CSS floats

Question

I have always thought that the correct way to handle CSS floats was to use either a clear div, :after pseudo class, or overflow: auto on the parent. As I understand it clear is designed to clear floats and expand the parent element back to normal. That is it's purpose, yes?

Today I found heard of an alternate method of handling the float (and parent collapse): floating the parent as well to make it expand around the floated child.

How does this align with web standards? Is there even an official float/clear standard?

Answer 1

There is no particular standard here. Use whatever works in the situation.

Adding in extra HTML elements just to clear the float is frowned upon, but can occasionally be useful.

I personally like the prefer to use the Float Nearly Everything style of floating the parent, but it doesn't fit every situation.

Answer 2

When first learning CSS I used the parent-child floating method (funny story, I actually only used floats + width (now that I've read that it's not that funny)) but now I feel that it's just plain dirty. I mean where do you stop? Do you just float the hell out of everything?

This would work of course but I've found that the more elegant solution is to apply floats where necessary (for lining elements up good n proper) and clear them appropriately. Heck these days I even throw a bit of position: absolute and position: relative in to the mix.

Clear is made for the purpose of removing floats, and I'm not sure it's useful beyond that.

Of course CSS is one somb1tch to learn properly so maybe everything I've just typed is pure conjecture and you shouldn't listen to any of my tongue waggling.

Answer 3

All these methods hacks of a sort - floats were never really designed for the kinds of layouts we use them for. They were intended to control the flow of text around things like images. As a result, as edeverett says, there isn't one approved way to approach it - use whatever works in your circumstance!

I personally prefer the overflow:hidden method because of its simplicity. I've never had issues with it.

Bring on css3 and multi-columns!

http://www.css3.info/preview/multi-column-layout/

Answer 4

As @edeverett said, there is no particular standard.

Real beginners use absolute positioning and enter the nightmare mode as there is so many constraints and things to care about.

Beginners tend to float everything within the content and then search where the background of the parent is, though with no content in the flow the parent can't have a visible background anymore ...
I had hard times with IE6 and the last column (too large for the whole design) going under the others (due whether to doubled margin float bug or a width 100% + padding/margin on a child)

Then you learn many different techniques, each with its strength and constraints and problems.

Then you learn by experience when to use each of them. Even absolute positioning in seldom cases ; even layout tables in desperate cases. They're bad but a layout with 25 divs waiting to explode as soon as you add 1px somewhere are worse.
A rule of thumb is the less you remove content from the flow, the less you have problems. And there always many ways to do the same thing in CSS.

My personal favorite is the versatile display: inline-block;
Now that Fx 3.x has replaced Fx 2.0 (3.0 is even disappearing), it's supported by every browser (display: inline; + zoom: 1; + conditional comment for IE<8).
Two minor annoyances I can think of:

• Whitespace needs a trick like a </div><!-- comment --><div> between two consecutive div to avoid it
• vertical-align: top; is often required and is hard to spot when you begin to use it

On forms with a label + input per line, it does wonders, compared to floats. Same in headers or footers.