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

本文详细解释了HTML中元素浮动(float)的工作原理及其如何影响页面布局。通过具体例子阐述了当一个元素被设置为浮动时，它从正常文档流中移除，并影响后续元素的位置。此外，还介绍了清除(clear)属性的作用，即如何使用clear属性来解决由浮动元素引起的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.