为什么 Firefox 在折叠边距上表现不同？答案

【问题标题】：Why does Firefox behave differently on collapsing margins?为什么 Firefox 在折叠边距上表现不同？
【发布时间】：2015-07-08 17:16:37
【问题描述】：

Firefox 在 div.p 的顶部呈现 100 像素的边距。这似乎是一个利润崩溃。但是div.p 的计算高度是 100px。根据spec，它不应该做保证金崩溃。这是一个错误，还是我在这里错了？ Chrome 按预期呈现。
codepen

.s {
  height: 100px;
  width: 200px;
  background: yellow;
  float: left;
}
.p {
  margin-top: 20px;
  margin-bottom: 100px;
  zoom: 1;
}
.p:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
}

<div class="p">
  <div class="s"></div>
</div>

【问题讨论】：

我不确定它是什么，但如果你删除float:left，它就不会发生，所以我不认为这是一个折叠边距。
这似乎是margin-bottom造成溢出的问题，如果我们添加*{overflow:auto}，问题就不会再出现了：codepen.io/anon/pen/ZGxWVB
我可以理解为什么如果我们*{overflow:auto}，问题就不会再发生了，因为它创建了一个 BFC。
您的问题没有在我的代码 sn-p 中复制。 Chrome 和 FF 都是相同的输出。我正在运行 Firefox 46.0

标签： html css

【解决方案1】：

我不确定为什么传统的 clearfix 不起作用，但这里有三种方法可以做到：

就像 Kaiido 所说的那样，*{overflow:auto;} 可以很好地解决问题。这也可以用作*{overflow:hidden;}。

如果您不希望一揽子溢出，您可以将overflow:hidden 或overflow:auto 放在.p 上更精确。这也解决了这个问题。

最后，如果您在 clearfix (.p:after) 中将 display: block 更改为 display: table，问题也会消失。

我真的不确定为什么传统的 clearfix 不起作用，但解决起来并不难。

【讨论】：