Containing Floats

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:

float
container

If the container has any (not auto) width (here 100%),
then in IE5+/Win and Op7 the container encloses the floated box:
In IE6-7/Win the float's bottom margin is missing.

float
container

If the container is floated itself,
then in all browsers the container encloses the floated box:
In IE6-7/Win the float's bottom margin is missing.

float
container

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.

float
container

If the container has overflow:auto,
then Op7- crops the floated box; Saf, IE5/Mac, Moz, Op8+, IE7+ enclose it:
In IE7/Win the float's bottom margin is missing.

float
container

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.

float
container

If the container has position:absolute,
then in all browsers the container encloses the floated box:
In IE6-7/Win the float's bottom margin is missing.

float
container

If the container has display:table,
then in Op7+, Moz, Saf, IE8 the container encloses the floated box:

float
container

If the container has display:inline-block,
then in Op7+, Saf, IE5.5+/Win, IE5/Mac the container encloses the floated box:
In IE6-7/Win the float's bottom margin is missing.

float
container

With a clearing br inside the container,
in Op6+, Moz, Saf, IE/Mac, IE8 the container encloses the floated box:

float
container

With a clearing br inside the container and hasLayout for IE7-/Win,
in all browsers the container encloses the floated box:

float
container

With a empty clearing div inside the container and hasLayout for IE7-/Win,
in IE5+, Op6+, Saf, Moz1.8+ the container encloses the floated box:

float
container

With a empty clearing div inside the container, hasLayout for IE7-/Win, and a border (or padding) on the container,
in all browsers the container encloses the floated box:

float
container

float
container

With a clearing block generated content, hasLayout for IE7-/Win, inline-block for IE5/Mac,
in all browsers the container encloses the floated box:
In IE6-7/Win the float's bottom margin is missing.

float
container

IE7-/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-7. 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 IE7-/Win

float
container

blah blah (reset some IE7-/Win problems)

(2) clear div containing   with height: 0; line-height: 0; font-size: 1px; overflow: hidden

float
container
 

(3) clear div containing an empty comment with height: 0

float
container

The end

CSS tests home