最近工作中出現(xiàn)了一個有趣的問題：在有了CSS Grid和Flexbox之后，我們是否還應(yīng)該使用CSS float屬性？

簡短回答

不！或者說，大部分情況下不用。如今，我只會將其用于文本環(huán)繞圖片，并且會避免將其完全用于布局。

較長、更煩人的回答

在Flexbox和Grid出現(xiàn)之前，我們必須使用CSS float屬性來創(chuàng)建網(wǎng)格和布局。事實上，這是我學(xué)習(xí)網(wǎng)頁設(shè)計時接觸到的第一個屬性。在一個炎熱的夏日下午，我打開了一本Jeffrey Zeldman的《Designing with Web Standards》，然后用float: right移動了一個小小的紅色div。這簡直是魔法！float中蘊(yùn)含著巨大的力量。

在屏幕上移動元素如此簡單，以至于我現(xiàn)在想知道有多少設(shè)計師僅僅因為這種移動元素的簡易性而愛上了網(wǎng)頁設(shè)計。

但是，使用float構(gòu)建復(fù)雜的布局一直是一種權(quán)宜之計：它實際上只設(shè)計用于讓文本環(huán)繞圖片。

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

當(dāng)我們嘗試構(gòu)建大型布局和雜志式網(wǎng)格時，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，它解決了一個持續(xù)存在的bug，這個bug發(fā)生在兩個浮動元素并排堆疊的時候。當(dāng)元素以這種方式對齊時，父容器的高度最終會變?yōu)?，這很容易破壞布局。你可能只是想將側(cè)邊欄放在主內(nèi)容塊的左側(cè)，但結(jié)果卻是兩個元素相互重疊和折疊。更復(fù)雜的是，這個bug在不同的瀏覽器中表現(xiàn)不一致。clearfix就是為了解決所有這些問題而發(fā)明的。

此后，情況開始慢慢發(fā)生變化。早在2017年，Rachel Andrew就解釋了瀏覽器如何完全不需要任何hack就能處理clearfix問題。我們只需要以下CSS就能實現(xiàn)同樣的修復(fù)：

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

奇怪的是，直到我打字前三分鐘，我才知道flow-root值的存在。但這或許可以證明我接下來要說的論點(diǎn)：有了CSS Grid和Flexbox，我們實際上根本不需要float。這個屬性最初的設(shè)計只有一個目的：讓文本環(huán)繞圖片。但是現(xiàn)在，有了Grid和Flexbox，我們擁有了強(qiáng)大的功能，可以完成真正的布局工作。

回到我在工作中進(jìn)行的討論。一些人說，我們應(yīng)該回到代碼庫中，刪除所有float的實例，因為它是很舊的代碼，我們可以很容易地用Flexbox或Grid替換它。但在這里，我想說，“等等！”我認(rèn)為在代碼庫中的一些地方保留float屬性并沒有造成太大的損害——這不是會導(dǎo)致問題的放射性代碼。

那么，除了讓文本環(huán)繞圖片之外，我們還應(yīng)該將CSS float用于其他任何用途嗎？不。但是，我們是否應(yīng)該立即清除網(wǎng)絡(luò)上所有CSS float聲明，因為它不純粹，不是“正確”的做法？同樣也不。

網(wǎng)絡(luò)的妙處在于舊代碼不應(yīng)該破壞東西。問問Chris就知道了。一個沒有使用最炫的CSS屬性或最酷技巧的網(wǎng)站并不是無用或糟糕的。我們只是用更好的替代方案取代了float。我認(rèn)為這是一個很好的教訓(xùn)，這些CSS屬性可能會永遠(yuǎn)存在，因為它們在現(xiàn)代網(wǎng)頁設(shè)計中仍然有適用的用例。

這很好。

以上是CSS Float棄用了嗎？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！