8

CSS 2.1 规范中关于折叠边距的第 8.3.1 节指出：

如果具有间隙的元素的上边距和下边距相邻，则其边距会与后续兄弟的相邻边距一起折叠，但生成的边距不会与父块的底部边距折叠。

这是我的，肯定是不稳定的，试图从这个陈述中做出一些事情：

该语句考虑了一个元素 X：

  • X 有间隙，因此“clear: left;”、“clear: right;”中的任一个。或“明确：两者；” 属性已应用于它。

  • 由于 X 的顶部和底部边距是相邻的，因此在正常流程的情况下，我们正在考虑以下情况：

    • X 上面有一个父级，下面有一个兄弟姐妹，或者
    • X 上面有一个兄弟，下面有一个兄弟，或者
    • X 上面有一个兄弟姐妹，下面有一个父级

  • 然后规范说，“它的边距与后续兄弟的相邻边距一起折叠”，但正如上面所指出的，最多可以有一个后续兄弟，所以这本质上必须意味着如果后面有一个兄弟，那么边距就会折叠。

  • “但生成的边距不会与父块的底部边距一起折叠。” - 我不明白这一点：如果下边距与兄弟的上边距相邻，那么除非兄弟的高度为零，否则它不能与父块的下边距相邻。

我完全糊涂了。有人可以用一些说明性的例子更好地解释这个陈述吗？谢谢。

4

1 回答 1

5

首先，澄清几点：

  • 一个有间隙的元素是一个clear设置为其他东西的元素none ，实际上是在清除一个浮点数。

  • 顶部和底部边距相邻的元素意味着彼此相邻，而不是与兄弟姐妹相邻。我们谈论的是一个没有边框或填充的 0 高度元素，因此元素的上边距和下边距相互接触。当这种情况发生时，它们一起坍塌，这种情况称为坍塌。

现在，让我们看一个例子：

body {
  border:solid;
}
#container {
	margin: 20px;
	background: blue;
}
#floated {
	float: left;
	width: 20px;
	height: 20px;
	background: red;
}
#cleared {
	clear: left;
  margin-top: 10px;
	margin-bottom: 20px;
}
#following {
	margin-top: 30px;
}
<body>
<div id=container>
  <div id=floated></div>
  <div id=cleared></div>
  <div id=following></div>
<div>
</body>

在这里玩它：http: //jsbin.com/wuvilu/1/edit ?html,css,output

由于body上有边框，所以可以看到蓝色#container周围有20px的边距。红色的#floated 也是一个明显的 20px x 20px。

然后，由于它是 0 高度，没有填充和边框，#cleared 的顶部和底部边距相互折叠。它们还与#following 的上边距相邻。此折叠边距的大小为 30 像素，是三者中最大的。

由于#following 是0 高度并且没有填充和边框，我们的30px 边距与#container 的底部边距相邻，并且会随之折叠。除了现在你引用的规则开始生效，它没有。

由于它不会与容器的底部边缘一起折叠，因此必须将其放置在其中的某个位置。在哪里？它从 #floater 底部边缘上方 10px 开始，并在下方延伸 20px。为什么？#cleared 的上边距是参与此折叠边距的最高边距，所以我们从它开始的地方开始。因为它是 10px，我们的折叠边距从 #floater 的底部边缘上方 10px 开始，即紧接在它之前的元素。

是的，这太疯狂了，大多数涉及崩溃的场景都是疯狂的。崩溃是一个糟糕的想法，它本不应该成为 CSS 的，但它在人们了解之前就发生了，现在我们必须处理它，以及所有疯狂的后果。

于 2015-04-18T20:46:56.803 回答