为什么Firefox在折叠边距方面表现不同?

时间:2015-07-06 03:09:46

标签: html css

Firefox在div.p的顶部呈现100px的边距。这似乎是利润率的崩溃。但div.p的计算高度为100px。根据{{​​3}}它不应该做边际崩溃。这是一个错误,还是我错了? Chrome按预期呈现。
spec

.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>

1 个答案:

答案 0 :(得分:1)

我不确定为什么传统的clearfix不起作用,但这有三种方法:

像Kaiido说的那样*{overflow:auto;}可以解决这个问题。这也适用于*{overflow:hidden;}

如果您不想要一揽子溢出,可以通过将overflow:hiddenoverflow:auto放到.p来更精确。这也解决了这个问题。

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

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