css - CSS 中的 CLEARANCE 到底是什么

Question

因此，我开始阅读 CSS 规范以更好地理解如何在我的代码中使用样式属性和特性。目前在 Box 模型上- Collapsing Margins，http://www.w3.org/TR/CSS2/box.html#collapsing-margin ，我在规范中遇到了这一行。

If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block

有人愿意解释一下上面的真正含义吗？也请照上面使用的那样对间隙进行更多说明。非常感谢您在这里的投入。

Answer 1

也许可以这样看。

假设您有一个左浮动元素。让我们称它为 block F。该 block 被 float 从流中取出，因此下一个 block 元素(假设它不是 float 的，并称为 block B)从水平和垂直方向与 block F 完全相同的位置开始。当文本放在 block B 中，它开始填满 block B，但文本不会与 block F 重叠。这就是 float 的作用。

还假设还有另一个 block 元素，也没有 float ，并称该 block 为 C。(这将是我们的重要元素)。 Block C 将直接放置在 Block B 的下方。这取决于 F 和 B 的相对高度，可能开始于 F block 底部上方或下方。

-- 停在这里，确保你已经清楚地记住了三个 block F、B、C 的两个可能的图片 --

现在，假设我们将 clear:left 应用到 block C。如果 block C 开始于 block F 底部下方，则 clear:left 无效，并且有没有许可。

如果 block C 的起点高于 block F 的底部，则 block C 向下移动，直到其起点不再高于 block F 的底部。它移动的距离称为间隙。

[上面的描述有点被掩饰了。 block 的“开始”是边距框、边框框、填充框或内容框的内边缘还是外边缘？ “顶部”和“底部”也是如此。我们在这里不需要担心这个，但是 CSS 规范把它都钉下来了。]

一旦确定是否存在间隙，就可以机械地应用边缘崩溃可能发生的行为。

因此，为了回答您的评论问题，清除只能在应用除“无”以外的明确属性时发生，但这还不够，实际上必须将 block 向下移动。因此，如果 block C 实际上被 clear:left 规则向下移动，则引用的边距折叠规则仅适用于 block C。

最后，请注意，由于历史原因，有些情况下可以通过 HTML 属性间接应用明确的规则，而不是直接在 CSS 中应用。