什么是 CSS 中的 CLEARANCE

Kob*_*kie 14 css margin css-float

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

如果具有间隙的元素的顶部和底部边距相邻,则其边距与后续兄弟元素的相邻边距折叠,但产生的边距不会与父块的底部边距折叠

有人愿意解释一下上面的真正含义吗?请在上面使用的间隙上也照亮更多的光。绝对会感谢您的意见。

Alo*_*hci 6

也许是这样看的。

假设您有一个左浮动元素。让我们称它为块 F。那个块被浮动从流中取出,所以下一个块元素(假设它没有浮动,并称之为块 B)在水平和垂直方向与块 F 完全相同的位置开始。当文本放置在块 B 中,它开始填充块 B,但文本不会与块 F 重叠。这就是浮点数的作用。

还假设还有另一个块元素,也没有浮动并调用该块 C。(这将是我们的重要元素)。块 C 将直接放置在块 B 的下方。这取决于块 F 和 B 的相对高度,可能从块 F 的底部上方或下方开始。

-- 停在这里,确保你已经在脑海中清楚了 F、B、C 三个街区的两张可能的图片——

现在,假设我们适用clear:left于块 C。如果块 C 从块 F 的底部下方开始,clear:left则没有效果,并且没有间隙。

如果块 C 从块 F 的底部上方开始,则块 C 向下移动,直到它的起点不再高于块 F 的底部。它移动的距离称为间隙

[上面的描述有点被掩盖了。块的“开始”是边距框、边框框、内边距框或内容框的内边缘还是外边缘?“顶部”和“底部”也是如此。我们不需要在这里担心这个,但是 CSS 规范把这一切都搞定了。]

一旦确定是否清除,就可以机械地应用边缘塌陷可能发生的行为。

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

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

  • 好的。尝试这个。[案例一](http://jsfiddle.net/MDjBB/3/)块B的高度小于F的高度。间隙是绿色框和蓝色框之间的垂直间隙。[案例二](http://jsfiddle.net/MDjBB/2/)块B的高度大于F的高度。绿色和蓝色框之间没有垂直间隙,因此没有间隙。 (2认同)

cor*_*ard 1

我不确定这是否是一个测试,但是您引用的单词 \xe2\x80\x9cclearance\xe2\x80\x9d 的确切实例实际上链接到了该规范的描述/定义:

\n\n

http://www.w3.org/TR/CSS2/visuren.html#clearance

\n\n
\n

除“none”之外的值可能会引入间隙。间隙会抑制边距折叠,并充当元素顶部边距上方的间距。它用于将元素垂直推过浮动。

\n
\n