Question

.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

我认为上面的clearfix方法既紧凑又安全。但是，我意识到如果这个方法和我想的一样好，它应该是最流行的clearfix方法，而实际上并没有被广泛使用。

我的问题是：这个clearfix会带来什么潜在的问题？

以下是一个展示其工作原理的示例：

.container {
  background: silver;
}
.float {
  float: left;
}
/* Is this safe? */

.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="container">
  <div class="float">
    outer-float
  </div>
  <div class="clearfix">
    <div class="float">
      inner-float
    </div>
    content
  </div>
</div>

Answer 1

在::before伪元素中使用间隙有点奇怪，因为由于间隙，元素的内容将被放置在浮点数下方，浮动仍然会与元素重叠。

查看添加背景时会发生什么：

.container {
  background: silver;
}
.float {
  float: left;
}
.clearfix {
  background: green;
}
.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="container">
  <div class="float">
    outer-float
  </div>
  <div class="clearfix">
    <div class="float">
      inner-float
    </div>
    content
  </div>
</div>

通常人们想要的是元素本身的间隙，或者没有间隙。

.container {
  background: silver;
}
.float {
  float: left;
}
.clearfix {
  background: green;
  clear: both;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="container">
  <div class="float">
    outer-float
  </div>
  <div class="clearfix">
    <div class="float">
      inner-float
    </div>
    content
  </div>
</div>

无论如何，注意向::before伪元素添加间隙不是一个明确的修复。 Clearfixes是用于强制块垂直增长以便包含其所有浮动内容的hackish技术。也就是说，clearfixes是一种模拟块格式化上下文根的方法。这就是为什么要在::after伪元素中的内容之后使用许可。

申请“明确：两者都可以”是否安全到.clearfix ::之前？

1 个答案: