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

Question

演示

使用clearfix technique非常有用，但任何人都表示使用此方法的问题是增加了额外的填充值，如演示中所示。

两者的高度相等。

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

只是一个雅库布说。 .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;
}

Answer 2

你的问题很简单：

.clearfix:before

如果您添加它会.像您在 CSS 中设置 a 一样将其粘贴在前面，请. 删除它，它可以正常工作clearfix:after