html – 为什么Firefox在折叠边距时表现不同？

发布时间：2020-12-14 16:41:40 所属栏目：资源来源：网络整理

导读：Firefox在div.p的顶部渲染100px的边距.这似乎是利润率的崩溃.但是div.p的计算高度是100px.根据 spec它不应该做保证金崩溃.这是一个错误,还是我错了？ Chrome按预期呈现. codepen .s { height: 100px; width: 200px; background: yellow; float: left;}.p { m

Firefox在div.p的顶部渲染100px的边距.这似乎是利润率的崩溃.但是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>

解决方法

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

就像Kaiido说的那样* {overflow：auto;}可以解决这个问题.这也可以作为* {overflow：hidden;}.

如果你不想要一个毯子溢出,你可以通过将overflow：hidden或overflow：auto添加到.p来更精确.这也解决了这个问题.

最后,如果你在clearfix(.p：after)中更改display：block to display：table,问题也会消失.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!