The clearfix method adds an extra padding

Question

Demo

Using the clearfix technique is useful, but someone pointed out that the problem of using this method increases the add-on value as shown in the demo.

The height of both is equal.

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

Jakub just said. .clearfix:before, .clearfix:after{content: "."; display: table;} .clearfix:before, .clearfix:after{content: "."; display: table;} adds the period before and after your element. Rather, use this code:

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

Or another method should use only this code:

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

Answer 2

You publish it simply:

 .clearfix:before 

If you add that he will stick . in front just like you set a in your CSS a . Remove it and it works fine with clearfix:after