‘Five Minute Argument’ is the personal site of Bobby Jack, a London-based Web Developer.
More quirky float behaviour
In the normal case, adjoining vertical margins collapse, as can be seen in this example:
A normal paragraph ...
... follwed by another normal paragraph.
However, according to the CSS2.1 spec,
Vertical margins between a floated box and any other box do not collapse
So, apparently, the middle paragraph of the following three, which is floated, should have twice the amount of vertical margin. In Firefox, Opera, and Safari, this does not appear to be the case:
A normal paragraph.
A paragraph, floated to the left.
A following paragraph, cleared.
Internet Explorer 7, however, displays equal double-spaced vertical margins around that floated paragraph. It’s rare that IE gets something right that the others get wrong, so what’s going on?
The answer lies, of course, in the spec.
Computing the clearance of an element on which ‘clear’ is set is done by first determining the hypothetical position of the element’s top border edge within its parent block. This position is determined after the top margin of the element has been collapsed with previous adjacent margins (including the top margin of the parent block).
The other parts of that reference are relevant too, but it all boils down to the cleared element’s top margin not really having any effect; it’s swallowed by the clearance. Thus, the cleared element will only ever be separated from the float by the float’s bottom margin.
‘Five Minute Argument’ is the personal site of Bobby Jack, a London-based Web Developer.