Bug in chrome using

Question

Google Chrome

Hello. Previously, I used zeroing by such a thing -
<див class="clearfix"></див>
- with styles
.clearfix { font-size: 0; line-height: 0; height: 0; clear: both;}

Everything was great. But there is an opinion that using empty blocks on the site is not entirely correct and therefore I decided to try this design:
<бр class="clearfix" />
with styles
.clearfix { clear: both; display: block; height: 0; line-height: 0; overflow: hidden; font-size: 0;}

So everything is as it should be everywhere, but in chrome there is some kind of extra height that I can’t kill in any way ... Maybe someone came across is this the solution?

Answer 1

Well, what is this clearfix? A real clearfix with no unnecessary elements at all is done:
www.positioniseverything.net/easyclearing.html
Starting with the heading "Putting It Together".

Answer 2

overflow and :after are everything.

Answer 3

> So everything is as it should be everywhere, but in chrome there is some kind of extra height that I can’t kill in any way ...
Start with the Metric tab in the inspector and see where it comes from.

Answer 4

Thank you all, I understand. I will do as they wrote above, that is, the second class.