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

簡短回答

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

較長、更煩人的回答

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

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

但是，使用float構建複雜的佈局一直是一種權宜之計：它實際上只設計用於讓文本環(huán)繞圖片。

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

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

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

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

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

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

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

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

這很好。

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