clearfix Technik fügt einige zusätzliche Polsterung

Question

DEMO

Mit clearfix technique super nützlich ist, aber jemand angezeigt hat, das Problem der Verwendung dieser Methode Pfund extra Wert erhöht wird, wie in Demo gezeigt.

Die Höhe der beiden gleich sind.

CSS:

body{margin: 0; padding: 0;} 
#wrap{width: 900px; height: 250px; background: red; margin: 0 auto;} 
.clearfix:before, .clearfix:after{content: "."; display: table;} 
.clearfix:after{clear: both;} 
.clearfix{zoom: 1;} 
#box{float: left; width: 200px; height: 250px; background: blue;} 

HTML:

<div id="wrap" class="clearfix"> 
<div id="box"><h1>some heading text here</h1></div> 
</div> 

Answer 1

Nur Jakub sagte. .clearfix:before, .clearfix:after{content: "."; display: table;} fügt einen Punkt vor und nach Ihrem Element hinzu. Vielmehr verwenden Sie diesen Code:

.clearfix:before, .clearfix:after{content: " "; display: table;} 

Oder eine andere Methode nur diesen Code zu verwenden:

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

Answer 2

Sie Problem ist einfach:

.clearfix:before 

Wenn Sie hinzufügen, dass es eine . vor kleben wie Sie gerade setzen in Ihrem CSS ein . Entfernen es und es funktioniert gut mit clearfix:after