CSS float 是否已过时？

前几天工作中出现了一个有趣的话题：既然我们有了 CSS Grid 和 Flexbox，我们现在是否应该使用 CSS 的 float 属性？

简短回答

不！好吧，大部分情况下是这样。我今天只会将它用于文本环绕图像的情况，并且我会完全避免将 float 用于布局。

更长、更烦人的回答

在 flexbox 和 grid 出现之前，我们必须使用 CSS 的 float 属性来创建网格和布局。事实上，这是我学习网页设计的第一件事。在一个炎热的夏日下午，我打开了一本 Jeffrey Zeldman 编写的《使用 Web 标准进行设计》的书籍，然后用 float: right 移动了一个小小的红色 div。这真是太神奇了。float 蕴藏着巨大的力量。

在屏幕上移动某个东西是如此简单，以至于我现在想知道有多少设计师仅仅因为使用它移动东西如此简单而爱上了 Web。

但是使用 float 构建复杂的布局一直是 一种变通方法：它最初的设计只是为了让文本环绕图像。

img {
  width: 150px;
  float: left;
}

当我们尝试构建大型布局和杂志风格的网格时，float 的问题就开始了。但那正是我们当时不得不做的事情，因为当时没有像今天这样的替代方案。

float 属性的一个问题是，您必须用一个称为 clearfix 的东西来包装浮动元素，它看起来像这样

<div class="clearfix">
  <div class="float-left">Column</div>
  <div class="float-left">Column</div>
  <div class="float-left">Column</div>
</div>

clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Jay Hoffman 之前描述过 clearfix 变通方法

clearfix 对于那些不知道的人来说，是一种 CSS 变通方法，用于解决两个浮动元素并排堆叠时出现的持续性错误。当元素以这种方式对齐时，父容器的高度最终会变为 0，并且很容易对布局造成破坏。您可能只是想将侧边栏定位在主要内容块的左侧，但结果是两个元素会重叠并互相折叠。更复杂的是，这个错误在不同浏览器中的表现不一致。clearfix 就是为了解决所有这些问题而发明的。

此后，情况开始慢慢发生变化。早在 2017 年，Rachel Andrew 就解释了 浏览器如何在没有任何变通方法的情况下处理 clearfix 问题。我们只需要以下 CSS 就可以进行相同的修复

.container {
  display: flow-root;
}

奇怪的是，在打字之前大约三分钟，我才知道 flow-root 值的存在。但我想这在某种程度上证明了我即将提出的论点：**有了 CSS Grid 和 Flexbox，我们实际上根本不需要 float。**该属性最初的设计是为了做一件事：让文本环绕图像。但是现在，有了 grid 和 flexbox，我们拥有了可以完成所有繁重布局工作的强大功能。

---

回到我在工作中提出的论点。有些人说我们应该回到代码库中删除所有 float 的实例，因为它是很旧的代码，我们可以很容易地用 flexbox 或 grid 替换它。但在这里我想说，“等等！”我认为在代码库的几个地方使用 float 属性并没有造成太大的伤害——这不是会造成问题的 放射性代码。

那么，除了让文本环绕文本之外，我们是否应该将 CSS float 用于任何其他用途？不。但是，我们是否应该立即清除 Web 上的所有 CSS float 声明，因为它不纯粹且不是“正确”的做法？同样也不应该。

Web 的妙处在于，旧代码不应该破坏任何东西。问问 Chris 就知道了。一个没有使用最花哨的 CSS 属性或最酷技巧的网站并不是无用或糟糕的。我们只是用更好的替代方案替换了 float。我认为这是一个很好的教训，这些 CSS 属性可能会永远存在，因为 它们在现代 Web 设计中仍然有适用的用例。

这没什么问题。