为什么浮动导致顶部的利润增加？

Question

简单的CSS问题,我一直想知道,我想知道它是如何工作的.

假设我有以下内容:

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

如果我float: left从给定<p>元素中删除该元素,则该元素及其先前的兄弟元素会堆叠得更近.

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

Answer 1

产生差异的原因是称为折叠边距的行为.

请注意,默认情况下,段落具有用户代理定义的上边距和下边距.

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

第二段时float: left,这两个边缘将不再相互坍塌; 它们不再被认为是相邻的,因为:

当且仅当以下情况时,两个边距相邻:

• 两者都属于参与相同块格式化上下文的流内块级框
• [...]

在"块格式化上下文"链接后面显示:

Floats [...]为其内容建立新的块格式化上下文.

规范继续说:

请注意以上规则意味着:

• 浮动框和任何其他框之间的边距不会崩溃(甚至在浮动及其流入子代之间也不会).
• [...]