css - 为什么 float 会导致顶部 margin 增加？

Question

一个简单的 CSS 问题，我已经想了一段时间，我想确切地了解它是如何工作的。

假设我有以下内容:

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

如果我删除 float: left来自给定的 <p>元素，该元素和它的前一个兄弟元素堆叠得更近。

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

Answer 1

造成差异的原因是一种称为 collapsing margins 的行为.

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

当第二段没有float: left时，第一段的下边距和第二段的上边距相邻，所以 彼此坍塌。

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

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context
• [...]

“ block 格式化上下文”链接显示:

Floats [...] establish new block formatting contexts for their contents.

规范接着说:

Note the above rules imply that:

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
• [...]