Firefox rendert eine 100px Marge am oberen Rand von div.p . Es scheint ein Margenkollaps zu sein. Aber die berechnete Höhe von div.p ist 100px. Laut der Spezifikation sollte keine Margin-Kollaps erfolgen. Ist es ein Fehler, oder liege ich hier falsch? Chrome wird wie erwartet gerendert.
Codepen
Ich bin nicht sicher, warum der traditionelle Clearfix nicht funktioniert, aber hier sind drei Möglichkeiten:
Wie Kaiido sagte ein *{overflow:auto;} funktioniert gut, um das Problem zu beheben. Dies funktioniert auch als *{overflow:hidden;} .
Wenn Sie keinen umfassenden Überlauf wünschen, können Sie genauer sein, indem Sie overflow:hidden oder overflow:auto auf nur .p setzen. Dies behebt auch das Problem.
Schließlich, wenn Sie display: block in display: table in Ihrem Clearfix (% co_de%) ändern, verschwindet auch das Problem.
Ich bin mir wirklich nicht sicher, warum der traditionelle Clearfix nicht funktioniert, aber es ist nicht allzu schwierig, damit umzugehen.