investigating 'hasLayout'...
...reverse engineering #5...
other solutions for containing floats…
According to standards: floats will expand to contain floats. That's also about the only definition that IE/win treats somewhat close to standards, so floats may actually work.
Clearing below floats using generated content with the pseudoclass ':after' is also an option, which most standard-compliant browsers have catched up on.
Putting solid clearing-elements below floats have always worked, and will continue to do so. Not "smart", but always efficient.
For completeness, read up on Clearing methods.
1: 'hasLayout'…
Floating image is contained in IE/win only.
testing…
This is a misplaced paragraph that has ended up here by accident. It is preceded by a heading that is floated left and pulled up over the edge of the container by a negative margin-top. Following this paragraph is an even more misplaced image that is floated right for the sake of demonstration.

working in:
- IE6: fine
_height: 0;
2: 'hasLayout' and 'float: left'…
Floating image is contained in all browsers.
testing…
This is a misplaced paragraph that has ended up here by accident. It is preceded by a heading that is floated left and pulled up over the edge of the container by a negative margin-top. Following this paragraph is an even more misplaced image that is floated right for the sake of demonstration.

working in:
- IE6: fine
- Opera 8+: almost (see below)
- Firefox 1.0: fine
- Safari 1.2.4: OK
- iCab: almost (see below)
float: left; _display: inline;
Note: IE/win need a fix for its 'margin-doubling-bug' on floats. A simple '_display: inline' will take care of that.
Note: Opera 8+ (and iCab) seems "confused", and won't make good use of awailable width when 'width: auto(default)' is defined on floats. The "cure" is of course to define a width other than auto. This "cure" is not used on example 2 because it comes in conflict with margins, border-width and paddings in a flexible layout, so this "confusion" should be clearly visible in all browsers / versions that have this weak point.
3: 'clear: both' using generated content…
Floating image is contained in "all" browsers.
testing…
This is a misplaced paragraph that has ended up here by accident. It is preceded by a heading that is floated left and pulled up over the edge of the container by a negative margin-top. Following this paragraph is an even more misplaced image that is floated right for the sake of demonstration.

working in:
- IE6: fine
- Opera 8: OK
- Firefox 1.0: fine
- Safari 1.2.4: fine
- iCab: fine
See: easyclearing for CSS-code and info.
4: solid <br class='clear: both' /> element…
Floating image is contained in all browsers.
testing…
This is a misplaced paragraph that has ended up here by accident. It is preceded by a heading that is floated left and pulled up over the edge of the container by a negative margin-top. Following this paragraph is an even more misplaced image that is floated right for the sake of demonstration.

working in:
- IE6: fine
- Opera 8: fine
- Firefox 1.0: fine
- Safari 1.2.4: fine
- iCab: almost
br.both { font-size:1px; line-height: 0; height: 0; clear:both; }
Note: the combination of a <br /> as clearing-element, and 'hasLayout=true' on the container in IE/win, is what makes this clearing-method work as well as it does across browser-land. Reason: IE/win is buggy, and need that 'hasLayout' trigger.
conclusion…
Example 2 & 3 should satisfy most needs for pure CSS solutions, in that they may actually work—after juggling those styles some across browser-land.
Example 4 is concidered to be "not pure enough" by some elitists, because of the extra element that's needed. However, it is 'according to W3C-standards' to use a clearing-element to clear below floats – period.
I use example 2 & 4 for containing floats in almost all cases, as I find the flexibility of using floats to contain floats near perfect in most cases. I also prefer the visible line break of a solid <br /> in non-CSS browsers, and the improved control of "look".
I'm waiting for W3C to create some consistant standards, and for browser-makers to clean up their acts and get some working logic into their software. In the mean time; we better learn how, and when, to use each alternative, if we want cross-browser stable solutions.
sincerely
Hageland 04.sep.2005
last rev: 19.nov.2005
investigating 'hasLayout'...