Html 申请是否安全；明确：两者皆有&引用；到.clearfix:：之前？

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

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

下面是一个示例，展示了它的工作原理：

.container{
背景：银；
}
.浮动{
浮动：左；
}
/*这安全吗*/
.clearfix:：之前，
.clearfix:：之后{
内容：“；
显示：块；
明确：两者皆有；
}

外浮子
内浮子
内容

在

中使用间隙：：before

伪元素有点奇怪，因为虽然由于间隙，元素的内容将放置在浮动下方，但浮动仍将与元素重叠

查看添加背景时发生的情况：

.container{
背景：银；
}
.浮动{
浮动：左；
}
.clearfix{
背景：绿色；
}
.clearfix:：之前，
.clearfix:：之后{
内容：“；
显示：块；
明确：两者皆有；
}

外浮子
内浮子
内容

在

中使用间隙：：before

伪元素有点奇怪，因为虽然由于间隙，元素的内容将放置在浮动下方，但浮动仍将与元素重叠

查看添加背景时发生的情况：

.container{
背景：银；
}
.浮动{
浮动：左；
}
.clearfix{
背景：绿色；
}
.clearfix:：之前，
.clearfix:：之后{
内容：“；
显示：块；
明确：两者皆有；
}

外浮子
内浮子
内容

虽然实际上它并没有被广泛使用。。。。你怎么知道的？。另外，

上的clearfix:before

元素通常不需要，此方法的唯一内容是，如果您出于其他目的需要该伪元素，或者如果您需要支持IE7或below@DaniP我读过的科技博客都没有推荐或提到它。我认为如果这真的是一个很好的解决方案，我应该到处都能看到它（科技博客，所以帖子，生产代码等等）。好吧，你可能需要获得新的资源，作为关于浮动的许多问题的一个例子。这里是你在2014年帖子中获得的第一个链接@孙庆尧啊。我想Oriol已经为你提供了一个解释。虽然实际上它并没有被广泛使用。。。。你怎么知道的？。另外，

上的clearfix:before

元素通常不需要，此方法的唯一内容是，如果您出于其他目的需要该伪元素，或者如果您需要支持IE7或below@DaniP我读过的科技博客都没有推荐或提到它。我认为如果这真的是一个很好的解决方案，我应该到处都能看到它（科技博客，所以帖子，生产代码等等）。好吧，你可能需要获得新的资源，作为关于浮动的许多问题的一个例子。这里是你在2014年帖子中获得的第一个链接@孙庆尧啊。我想Oriol已经为您提供了一个解释。我还有一个额外的问题：如何将

clear:both

应用于整个

。clearfix

元素？像这样：

.clearfix{clear:both}

。找到了。@sunqingyao是的，它将移动到前面的浮动（如果是块级别）下面的

.clearfix

。我还有一个额外的问题：如何将

clear:both

应用到整个

.clearfix

元素？像这样：

.clearfix{clear:both}

。找到了。@sunqingyao是的，它将移动到前面的浮动（如果是块级别）下面的

.clearfix

。

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