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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With