1

我很清楚（双关语）实现 clearfix 的两种最佳方式是通过 Nicolas Gallager 的微版本 .cf { *zoom: 1; }，或者使用overflow: hidden.

但是，当没有什么需要修复时，是否应该使用 clearfix 呢？（再次双关语。）

换句话说，如果你有一个类似article或section仅仅出于语义原因的容器——它没有背景或任何视觉效果（如本例中所追求的），但里面有浮动元素——你还应该清除它吗？

我为什么要问？

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

在此处输入图像描述

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

但这有关系吗？

到目前为止我的推理：

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

4

2 回答 2

2

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

于 2013-01-07T00:18:44.583 回答
2

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

使用 clearfix 时，您试图避免两个问题：

  1. 包含后代浮动。这意味着有问题的元素使自己足够高以包裹所有浮动的后代。（他们不挂在外面。）
  2. 使后代与外部浮子绝缘。这意味着元素内部的后代应该能够使用clear: both并且不与元素外部的浮动交互。

每当元素包含浮动后代并且您想要完成这两个目标时，使用 clearfix 非常重要。我对所有包含浮动的元素执行此操作。在我对同一问题的回答中阅读更多内容。

（正如你可能从那篇文章中看出的那样，我强烈反对“实现 clearfix 的两种最佳方法是通过 Nicolas Gallager 的微版本.cf { *zoom: 1; }，或者使用overflow: hidden.”我对 没有问题zoom: 1，但overflow: hidden会剪掉任何掉下来的东西在元素的范围之外。）

于 2013-01-07T19:34:50.417 回答