html - 将 "clear: both;"应用于 .clearfix::before 是否安全？

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 伪元素中使用 clearance 有点奇怪，因为尽管由于 clearance 元素的内容将放置在 float 下方，但 float 仍会覆盖元素。

看看添加背景后会发生什么:

.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 伪元素添加间隙不是 clearfix。 Clearfixes 是一种黑客技术，用于强制 block 垂直增长以包含其所有 float 内容。也就是说，clearfixes 是一种模拟 block 格式化上下文根的方法。这就是为什么在 ::after 伪元素中的内容之后应该使用间隙。