tecnica clearfix aggiunge qualche chilo in più

Question

DEMO

utilizzando clearfix technique è impressionante utili, ma nessuno ha indicato il problema di questo metodo è aumentata valore chilo in più, come mostrato nella demo.

L'altezza di entrambi è uguale.

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

Solo un Jakub ha detto. .clearfix:before, .clearfix:after{content: "."; display: table;} sta aggiungendo un punto prima e dopo il tuo elemento. Piuttosto, utilizzare questo codice:

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

Oppure, un altro metodo è di usare solo questo codice:

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

Answer 2

problema che si è semplicemente questo:

.clearfix:before 

Se si aggiunge che si attacchi un . di fronte proprio come te stai impostando nel tuo CSS a . Rimuovi e funziona perfettamente con clearfix:after