In all the following test cases a green box is the parent of a red left-floated box.
Usually the container does not enclose the floated box:
If the container has any (not auto) width (here 100%),
then in IE5+/Win and Op7 the container encloses the floated box:
In IE6+/Win the float's bottom margin is missing.
If the container is floated itself,
then in all browsers the container encloses the floated box:
In IE6+/Win the float's bottom margin is missing.
If the container has overflow:hidden,
then Moz1.4- and Op7- crop the floated box; Saf, IE5/Mac, Moz1.5+, Op8+, IE7 enclose it:
In IE7/Win the float's bottom margin is missing.
If the container has overflow:auto,
then Op7- crops the floated box; Saf, IE5/Mac, Moz, Op8+ enclose it:
In IE7/Win the float's bottom margin is missing.
If the container has any height (here 1em),
then in IE6-/Win the container encloses the floated box:
In IE6/Win the float's bottom margin is missing.
In IE7 there is no enclosure and a following clear doesn't work.
If the container has position:relative,
then in Moz1.2- (?) the container encloses the floated box:
blah blah (reset some IE/Win problems)
If the container has position:absolute,
then in all browsers the container encloses the floated box:
In IE6+/Win the float's bottom margin is missing.
If the container has display:table,
then in Op7+, Moz, Saf the container encloses the floated box:
If the container has display:inline-block,
then in Op7+, Saf, IE5.5+/Win, IE5/Mac the container encloses the floated box:
In IE6+/Win the float's bottom margin is missing.
With a clearing br inside the container,
in Op6+, Moz, Saf, IE/Mac the container encloses the floated box:
With a clearing br inside the container and hasLayout for IE/Win,
in all browsers the container encloses the floated box:
With a empty clearing div inside the container and hasLayout for IE/Win,
in IE5+, Op6+, Saf, Moz1.8+ the container encloses the floated box:
With a empty clearing div inside the container, hasLayout for IE/Win, and a border (or padding) on the container,
in all browsers the container encloses the floated box:
With a clearing block generated content, hasLayout for IE/Win, inline-block for IE/Mac,
in all browsers the container encloses the floated box:
In IE6+/Win the float's bottom margin is missing.
IE/Win notes: Without hasLayout on the container (see 3 following tests):
(1) With a simple empty clearing div there are problems (background, ...)
(2) Partially fixed with height: 0; line-height: 0; font-size: 1px; overflow: hidden and addition of content for the clearing div
(3) Or with height: 0 and an empty comment inside the clearing div.
But it's always better to also use hasLayout on the container, to avoid other problems (instability in the rendering of the content, ...)
- With hasLayout alone there is stable enclosing and rendering, but the float's margin-bottom is lost in IE6+. In presence of hover this may come back (creating some jumping float's bottom margin effect.) There may also be other problems.
- With hasLayout and a clearing element all is usually fine.
Other notes:
Op6 sometimes creates an unnecessary horizontal scrollbar.
The following examples have "border-bottom: 0.1px solid #fc0" necessary for Moz 1.7- (with 0.1px it is usually not visible as border.)
(1) clear empty div: problems in IE/Win
blah blah (reset some IE/Win problems)
(2) clear div containing with height: 0; line-height: 0; font-size: 1px; overflow: hidden
(3) clear div containing an empty comment with height: 0
The end