Why does Firefox behave differently on collapsing margins?

Question

Firefox renders a 100px margin at the top of div.p. It seems to be a margin collapse. But the computed height of div.p is 100px. According to the spec it should not do margin collapse. Is it a bug, or am I wrong here? Chrome renders as expect.
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>

Answer 1

I'm not sure why the traditional clearfix is not working, but here are three ways that do:

Like Kaiido said a *{overflow:auto;} works just fine to fix the issue. This also works as *{overflow:hidden;}.

If you don't want a blanket overflow, you can be more precise by putting overflow:hidden or overflow:auto to just .p. This also fixes the issue.

Finally, if you change display: block to display: table in your clearfix (.p:after), the issue also goes away.

I'm really not sure why the traditional clearfix is not working, but it isn't too hard to work around.