If there is an uncleared float above an element which is being displayed as
a block-level element, the
clear property automatically increases
the top margin of that element enough so that its top border edge will be below
the bottom margin edge of elements floated in the direction specified by the
value of the clear property. You can clear left floated elements, right floated
elements, both, or none. And the values for the clear property of "left",
"right", "both", and "none" reflect that.
The tricky thing is that if the
clear property is actively
increasing the top margin of an element, setting its top margin won't have any
effect unless you set it to be enough to clear the float without the clear
property. It's even trickier when you have a child or following sibling element
whose top margin is collapsing with that of an element whose clear property is
actively increasing the top margin of an element. In that case the same thing
happens if you don't do something to prevent the margin from collapsing, e.g.
add some top padding or a top border to the element with the clear property.
IE4-7/Win and versions of Opera before 9.0 display the first example incorrectly. Firefox, NS6.0-7.2, Safari, Opera 9+, iCab 3, and IE5/Mac display this correctly.
clear:both. Its parent has no top padding
and no top border.
clear:both. Its parent has some top padding
to prevent the top margins from collapsing.