.clearA {
overflow: hidden;
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
.clearB {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
.clearC {
overflow: hidden;
clear: both;
height: 1px;
margin: -1px 0 0 0;
font-size: 1px;
}
| Browser | A1 | A2 | A3 | A4 | B1 | B2 | B3 | B4 | C1 | C2 | C3 | C4 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Win IE 6 | Y | Y | Y | P1 | P2 | Y | Y | P1 | Y | Y | Y | P3 |
| Win IE 5.5 | P2 | Y | Y | P1 | P2 | Y | Y | P1 | P3 | P3 | P3 | P3 |
| Win IE 5.0 | Y | Y | Y | P1 | P2 | Y | Y | P1 | P3 | P3 | P3 | P3 |
| Win Moz/FF | N | N | N | Y | N | P6 | N | Y | Y | Y | Y | Y |
| Win NN 7.1 | N | N | N | Y | N | P6 | N | Y | Y | Y | Y | Y |
| Win Opera 7.x | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
| Win Opera 6.0 | Y | Y | Y | Y | Y | Y | Y | Y | Y | P4 | Y | Y |
| Mac IE | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
| Mac Moz/Camino | N | N | N | Y | N | N | N | Y | Y | Y | Y | Y |
| Mac FF | N | N | N | Y | N | N7 | N | Y | Y | Y | Y | Y |
| Mac NN 7.1 | N | N | N | Y | N | N | N | Y | Y | Y | Y | Y |
| Mac Opera 7.5 | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
| Mac Opera 6.0 | Y | Y | Y | Y | Y | Y | Y | Y | Y | P4 | Y | Y |
| Mac Safari | Y | Y | Y | Y | Y | Y | Y | Y | P5 | P5 | P5 | Y |
| Mac OmniWeb 5.0b | Y | Y | Y | Y | Y | Y | Y | Y | P5 | P5 | P5 | Y |
| Linux Moz 1.8 | N | N6 | N | Y | ||||||||
| Linux Moz 1.5 | N | N | N | Y | N | Y | N | Y |
Y = Yes, the gray container envelops the red float and there is no extra space
beneath the float.
N = No, the gray container does not envelop the red float.
P = Partial, the gray container envelops the red float but leaves extra space
beneath it, or the container will only contain the float if the container
has certain characteristics (dimension, border, padding, etc.)
1 This will only work if the container has a dimension assigned
2 There is an extra 1 or 2 pixels of space below the float. line-height: 0 only fixes B2, not B1. Space not present in WinIE5.0 for A1 due to overflow: hidden, but this doesn't work for WinIE5.5 for A1.
3 If the container does not have a dimension assigned, C1-3 will show an extra 1 pixel of space below the float, and C4 will not work at all.
4 The container is 1 or 2 pixels too short (the float overlaps slightly).
5 There is an extra 1 pixel below the float.
6 This does not work in Win98 or Linux, apparently due to font rendering differences.
7 This is working at least since build 20040531, possibly before.
Overflow: hidden seems only to benefit WinIE5.0, which needs it when using a div with nothing in it, otherwise it shows a gap beneath the float. font-size: 0 does not fix this, and causes MacIE to "leave a big space beneath the float." Line-height: 0 gets rid of the gap only when the div has inside (or presumably other characters).
IE is also very dependent on font-size: 1px. Without it, many of the tests show extra space beneath the float.
Gecko seems to have a problem with empty divs, divs without height, and divs where the content is super small (more explanation of what this means below).
B2 will work in Gecko on WinXP and Win2K, but not Win98. It also will not work on Mac. This platform and OS dependency seems to be based on the font rendering differences between the different OS's. Why do I say this? Because messing with the font properties of B2 is what determines whether it will work or not. If you remove the font-size declaration entirely, it works in all Geckos. Increasing the font-size also makes it work. If you leave font-size: 1px in there, you can also get it to work by changing the to a character that takes up more horizontal space, such as an X.
Bruno Fassino created a page which shows the variation in clearing using different
characters. Which characters work varies by platform and font:
http://www.brunildo.org/cgi-bin/gecko_clear0.pl
The default font is Arial and the default size is 1px, but you can change it
to see how the clearing changes based on font properties:
http://www.brunildo.org/cgi-bin/gecko_clear0.pl?family=Times+New+Roman&size=2
Possible solutions to fix B2 for MacGecko:
These tests need to be performed on Win98.
Another strange item of note: MacFirefox seems to have been recently cured of this buggy behavior. B2 was not working in Firefox 0.8 build 20040331, but is working in build 20040531.
Adding a border or padding to the container, or a border to the clear, makes
Gecko contain the floats in all examples. Evidently margin collapsing is going
on, but I don't know where or why. This appears to be a manifestation of these
bugs:
http://bugzilla.mozilla.org/show_bug.cgi?id=209694
http://bugzilla.mozilla.org/show_bug.cgi?id=224057
The C tests were an attempt to solve this issue, because they assigned a height of 1px, but unfortunately C does not work well cross-browser.