css - 为什么浮动会导致顶部保证金增加？

Question

简单的 CSS 问题，我一直在想，我想了解它是如何工作的。

假设我有以下内容：

<div>
   <p>some text</p>
   <p style="float: left">some text</p>
</div>

如果我float: left从给定<p>元素中删除，则该元素及其前一个兄弟元素堆叠得更近。

为什么浮动元素会导致其顶部的边距增加？

score 6 · Accepted Answer

差异的原因是一种称为折叠边距的行为。

请注意，默认情况下，段落有一个用户代理定义的顶部和底部边距。

当第二段没有时，第一段float: left的下边距和第二段的上边距相邻，因此相互折叠。

当第二段有float: left时，这两个边距将不再相互折叠；它们不再被认为是相邻的，因为：

两个边距相邻当且仅当：

两者都属于参与相同块格式化上下文的流入块级框

[...]

在“块格式化上下文”链接之后显示：

浮点数 [...] 为其内容建立新的块格式化上下文。

规范继续说：

请注意，上述规则意味着：

浮动框和任何其他框之间的边距不会塌陷（甚至在浮动框与其流入的子代之间也不会塌陷）。

[...]

score 0 · Accepted Answer

我在 Chrome19 上不会发生这种情况。但由于浏览器的默认样式表会发生这种情况。如果您想防止这种情况发生，请使用 margin: 0; 填充：0；在浮动元素上。

2 回答 2