在没有什么可修复的情况下使用 clearfix？

Question

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

但是当没有什么要修复的时候应该使用 clearfix 吗？（再次双关语。）

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

我为什么要问？

好吧，显然有些地方出了问题，因为如果您在网络检查器中调出容器，您将不会看到该容器突出显示，例如它只是一个不可见的滑行：

（在Firefox Tilt 中，它以 3D 形式可视化网站，当您将网站旋转 90 度时，容器块应该是一个空白区域。）

但这有关系吗？

到目前为止我的推理：

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

Answer 1

听起来在您的情况下，问题还没有出现，但我更喜欢防御性地编写代码。如果您稍后尝试为包含浮动的元素添加边框或背景怎么办？它看起来不正确。或者，如果您稍后对浮动进行更改以使其不占用全部可用宽度怎么办？然后，随后的内联内容可能会潜入浮动的任一侧。在我看来，您正在努力防止未来发生变化。

您在使用 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。）

Answer 2

我认为您应该始终使用 clearfix。如果不这样做，可能会出现许多问题，例如在此 div 之后的某些元素中浮动内容，页面边界问题（边距、填充等）。始终使用它比在不使用时搜索和查找问题更简单，因为并非在所有情况下都可以很明显地看出问题所在。