应用“clear: both;”是否安全？到 .clearfix::before?答案

【问题标题】：Is it safe to apply "clear: both;" to .clearfix::before?应用“clear: both;”是否安全？到 .clearfix::before?
【发布时间】：2017-03-06 13:13:17
【问题描述】：

.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>

【问题讨论】：

虽然实际上它并没有被广泛使用。 .... 你怎么知道的？ :before 元素上的 clearfix 通常不需要，此方法的唯一内容是如果您需要该伪元素用于其他目的，或者您需要支持 IE7 或更低版本
@DaniP 我读过的所有技术博客都没有推荐或提及它。我认为如果这真的是一个不错的解决方案，我应该到处（技术博客、SO 帖子、生产代码等）都能看到它。
好吧，您可能需要获取新资源作为有关浮动的许多问题的示例，这里是您获得的第一个链接is this
2014 年发布 ...sitepoint.com/…
@sunqingyao 啊。好吧，我认为 Oriol 已经为您提供了解释。

标签： html css layout clearfix

【解决方案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 是一种骇人听闻的技术，用于强制块垂直增长以包含其所有浮动内容。也就是说，clearfixes 是一种模拟块格式化上下文根的方法。这就是为什么在::after伪元素中的内容之后应该使用间隙。

【讨论】：

我还有一个额外的问题：将clear: both 应用于整个.clearfix 元素怎么样？像这样：.clearfix {clear: both}。找到了here。
@sunqingyao 是的，这会将.clearfix 移动到前面的浮点数下方（如果是块级）。