Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does Firefox behave differently on collapsing margins?

Tags:

html

css

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>
like image 485
szmtcjm Avatar asked Jul 06 '15 03:07

szmtcjm


1 Answers

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.

like image 190
David Mann Avatar answered Dec 15 '22 21:12

David Mann