The Clear Property and Top Margins

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.

Demonstrations

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.