翻译系列之float是否已弃用？

[ifency]

原文地址：Is CSS float deprecated?，作者：Robin Rendle

前言

本人未必按一字一句进行翻译，只是根据原文的意思并且结合自己的理解能力来翻译，如有误处，欢迎提出～另外祝小姐姐小哥哥新年快乐呀，发量多多～至于为什么在新年第一天写文章呢？其实很早就想写的，但最近一直阅读源代码，但总结不出来的，好卑微啊～然后没事就看看国外文章，正好看到一篇比较短的文章，就想翻译下～

正文

前几天上班时碰到一个有趣的话题：我们现在已经有了flex和grid，还需要float么？

简单来说

不！好吧，其实大多数时候我只用于在文字围绕图像上，但在布局方面上我完全避免用float

具体来说

flex和grid出来之前，我们用float来实现布局和网格。某一个酷热的夏天下午，我打开Jeffrey Zeldman写的《web标准设计》副本，然后翻到一个带有float:right的红色div，它的浮动简直神奇了。

现在我想知道有多少设计师因为web能实现屏幕上随意的位置而喜欢呢？

但是使用float来实现复杂的布局是一种技巧，它的真正目的只是为了让文字围绕图像。

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

当我们在巨大的布局要实现像杂志风格那样，使用float就暴露问题，但当时没有其他的方案可以实现，我们不得不继续用float。

使用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 hack(清除浮动）：

对于那些不知道的人来说，clearfix是一个css浮动的，是为了解决当两个浮动的元素在一起发生重叠的问题。但一个元素以这种方式对齐时，该元素的父容器的高度就为0，这就容易破坏布局。clearfix就是这样解决的。

从那之后就开始慢慢地改变了。早在2017年，Rachel Andrew解释了浏览器如何处理清除浮动的问题，我们需要的就是下面的css例子来处理相同的问题：

.container {
  display: flow-root;
}

奇怪的是，我开始写这篇文章三分钟之前才知道flow-root这个，但这个并不是本文要说的重点，我要表达的意思是，有了flex和grid，我们根本不需要float，float的作用本来就是让文本围绕图像。但现在有了flex和grid，他们足够可以完成复杂的布局。

---

回到我上班的话题那个，然后有些人说我们应该回去把代码库里的那些float都用flex和grid来替换掉。但就在这时，我就说：等会儿。我不认为在我们的代码库几个地方用到float会引发问题。

因此除了让文字围绕图像，我们还能用float做其他的事么？并不。但是因为float并不是纯粹的，也不是“正确”的处理方式，我们就应该立即清除这个么？并不。

web的最佳在于旧的代码不会破坏东西。没用到最新的属性或者最酷的技巧也并不是没用或者是一件坏事。我们只是用更好的方案去代替float。我认为这个是一个很好的教训，这些css属性可能永远存在，因为它们在现代设计中仍然可用的。

到此为止