html - clearfix 技术添加了一些额外的填充

Question

DEMO

使用 clearfix 技术 非常有用，但有人指出使用此方法的问题是增加了额外的填充值，如演示中所示。

两者高度相等。

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 说的。.clearfix:before, .clearfix:after{content: "."; display: table; 在你的元素前后添加一个句点。相反，使用此代码:

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

或者，另一种方法是只使用这段代码:

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