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中文網其他相關文章！