CSS Float弃用了吗？

最近工作中出现了一个有趣的问题：在有了CSS Grid和Flexbox之后，我们是否还应该使用CSS float属性？

简短回答

不！或者说，大部分情况下不用。如今，我只会将其用于文本环绕图片，并且会避免将其完全用于布局。

较长、更烦人的回答

在Flexbox和Grid出现之前，我们必须使用CSS float属性来创建网格和布局。事实上，这是我学习网页设计时接触到的第一个属性。在一个炎热的夏日下午，我打开了一本Jeffrey Zeldman的《Designing with Web Standards》，然后用float: right移动了一个小小的红色div。这简直是魔法！float中蕴含着巨大的力量。

在屏幕上移动元素如此简单，以至于我现在想知道有多少设计师仅仅因为这种移动元素的简易性而爱上了网页设计。

但是，使用float构建复杂的布局一直是一种权宜之计：它实际上只设计用于让文本环绕图片。

<code>img {
  width: 150px;
  float: left;
}</code>

当我们尝试构建大型布局和杂志式网格时，float的问题就开始了。但那时我们别无选择，只能这么做。

float属性的一个问题是，你必须用一个叫做clearfix的东西来包裹浮动元素，它看起来像这样：

<code><div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div></code>

<code>clearfix:after {
  content: "";
  display: table;
  clear: both;
}</code>

Jay Hoffman之前描述过clearfix hack：

清除浮动（clearfix），对于那些不知道的人来说，这是一个CSS hack，它解决了一个持续存在的bug，这个bug发生在两个浮动元素并排堆叠的时候。当元素以这种方式对齐时，父容器的高度最终会变为0，这很容易破坏布局。你可能只是想将侧边栏放在主内容块的左侧，但结果却是两个元素相互重叠和折叠。更复杂的是，这个bug在不同的浏览器中表现不一致。clearfix就是为了解决所有这些问题而发明的。

此后，情况开始慢慢发生变化。早在2017年，Rachel Andrew就解释了浏览器如何完全不需要任何hack就能处理clearfix问题。我们只需要以下CSS就能实现同样的修复：

<code>.container {
  display: flow-root;
}</code>

奇怪的是，直到我打字前三分钟，我才知道flow-root值的存在。但这或许可以证明我接下来要说的论点：有了CSS Grid和Flexbox，我们实际上根本不需要float。这个属性最初的设计只有一个目的：让文本环绕图片。但是现在，有了Grid和Flexbox，我们拥有了强大的功能，可以完成真正的布局工作。

回到我在工作中进行的讨论。一些人说，我们应该回到代码库中，删除所有float的实例，因为它是很旧的代码，我们可以很容易地用Flexbox或Grid替换它。但在这里，我想说，“等等！”我认为在代码库中的一些地方保留float属性并没有造成太大的损害——这不是会导致问题的放射性代码。

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

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

这很好。

以上是CSS Float弃用了吗？的详细内容。更多信息请关注PHP中文网其他相关文章！