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

只是一个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;
}

Answer 2

你的问题就是：

.clearfix:before

如果你添加它会将.放在前面，就像你在CSS中设置.一样删除它，它与clearfix:after

一起正常工作

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

2 个答案: