clearance css,css float - What exactly is CLEARANCE in CSS - Stack Overflow

Maybe look at it like this.

Suppose you have a left floated element. Lets call it block F. That block is taken out of the flow by the float, so the next block element (assume that it's not floated, and call that block B) starts at exactly the same place horizontally and vertically as block F. When text is placed in block B, it starts to fill up block B, but the text won't overlap with block F. That's what floats do.

Suppose too that there is a another block element, also not floated and call that block C. (This is going to be our important one). Block C will be placed immediately below block B. This, depending on the relative heights of blocks F and B might start above the bottom of Block F or below it.

-- Stop here and make sure you've got the two possible pictures of the three blocks F, B, C clear in your mind --

Now, suppose we apply clear:left to block C. If block C starts below the bottom of block F then the clear:left has no effect and there is no clearance.

If block C starts above the bottom of block F, then block C is moved down until its start is no longer above the bottom of block F. The distance it is moved is called the clearance.

[The description above is a bit glossed over. Is the "start" of a block the inner or outer edge of the margin box, border box, padding box, or content box? Similarly for "top" and "bottom". We don't need to worry about this here, but the CSS spec nails it all down.]

Once clearance or not has been established, then the behaviour of what can happen with margin collapsing can be applied mechanically.

So, to answer your comment questions, clearance can only happen when a clear property other than "none" is applied, but that's not sufficient, the block must actually be moved down. Thus the quoted margin collapsing rule only applies to block C if block C is actually moved down by the clear:left rule.

Finally, note that for historical reasons, there are situations where a clear rule can be applied indirectly via an HTML attribute, rather than directly in CSS.