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

Question

DEMO

使用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;
}