什么都没解决时使用clearfix？

Question

我很清楚（双关语）这两个best ways to implement clearfix是通过Nicolas Gallager的micro-version .cf { *zoom: 1; }，还是使用overflow: hidden。

但是，如果没有什么可以解决的话，是否应该使用clearfix？（双关语意图，再次。）

换句话说，如果你有一个像article或section这样的容器只是出于语义原因 - 它没有背景或任何视觉效果（就像在{{3}中所追求的那样） }），但内部已经浮动元素 - 你还应该清除吗？

我为什么要问？

嗯，显然有些问题是错误的，因为如果你在网络检查器中调出容器，你就不会看到容器突出显示，例如它只是一个看不见的滑行：

（在this example中，以3D形式显示网站，当您将网站旋转90度时，容器块应该是一个空白区域。）

但重要吗？

到目前为止我的理由：

当然，如果您决定将来使用容器进行视觉/布局，您会发现它的行为不正常，然后您应用了clearfix hack。但是，还有什么需要考虑的？

Answer 1

我认为你应该总是使用clearfix。如果不这样做，可能会出现许多问题，例如在此div之后的某个元素中浮动内容，页边界问题（边距，填充等）。总是使用它比在不使用时搜索和发现问题更简单，因为在所有情况下都不会出现这样的问题。

Answer 2

听起来在你的情况下，一个问题并没有让它变得丑陋，但我更喜欢防守代码。如果您稍后尝试向包含浮动的元素添加边框或背景怎么办？看起来不对劲。或者，如果您稍后对浮动进行更改以使它们不消耗完整的可用宽度，该怎么办？然后跟随的内联内容可能会潜入浮动的任一侧。在我看来，你正在努力防范未来的变化。

使用clearfix时，您尝试阻止两个问题：

1. 包含后代浮动。这意味着所讨论的元素使其自身足够高以包裹所有浮动后代。 （他们不会在外面闲逛。）
2. 从外部浮动绝缘后代。这意味着元素内部的后代应该能够使用clear: both并且不与元素外部的浮点交互。

在元素包含浮动后代的任何时候使用clearfix非常重要，并且您希望实现这两个目标。我为包含浮点数的所有元素执行此操作。我对Read more的回答the same question。

（正如您可能从该帖子中可以看出的那样，我强烈反对“实施clearfix的两种最佳方式是通过Nicolas Gallager的微型版本.cf { *zoom: 1; }，或者使用overflow: hidden。”问题与zoom: 1有关，但问overflow: hidden will clip anything that falls outside the bounds of the element。）