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

Question

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

假设我有以下内容：

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

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

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

Answer 1

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

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

当第二段没有float: left时，第一段的下边距和第二段的上边距相邻，因此崩溃彼此。

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

  

当且仅当：

时，两个边距相邻      

  
• 都属于参与相同block formatting context
的流入式块级框   
• [...]
  

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

  

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

规范继续说：

  

请注意上述规则意味着：

     

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

Answer 2

在Chrome19上我不会发生这种情况..但是这会因为浏览器的默认样式表而发生。如果你想防止这种情况发生，请使用margin：0;填充：0;在浮动元素上。