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

簡(jiǎn)短回答

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

較長(zhǎng)、更煩人的回答

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

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

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

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

當(dāng)我們嘗試構(gòu)建大型布局和雜志式網(wǎng)格時(shí)，float的問(wèn)題就開(kāi)始了。但那時(shí)我們別無(wú)選擇，只能這么做。

float屬性的一個(gè)問(wèn)題是，你必須用一個(gè)叫做clearfix的東西來(lái)包裹浮動(dòng)元素，它看起來(lái)像這樣：

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

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

Jay Hoffman之前描述過(guò)clearfix hack：

清除浮動(dòng)（clearfix），對(duì)于那些不知道的人來(lái)說(shuō)，這是一個(gè)CSS hack，它解決了一個(gè)持續(xù)存在的bug，這個(gè)bug發(fā)生在兩個(gè)浮動(dòng)元素并排堆疊的時(shí)候。當(dāng)元素以這種方式對(duì)齊時(shí)，父容器的高度最終會(huì)變?yōu)?，這很容易破壞布局。你可能只是想將側(cè)邊欄放在主內(nèi)容塊的左側(cè)，但結(jié)果卻是兩個(gè)元素相互重疊和折疊。更復(fù)雜的是，這個(gè)bug在不同的瀏覽器中表現(xiàn)不一致。clearfix就是為了解決所有這些問(wèn)題而發(fā)明的。

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

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

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

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

那么，除了讓文本環(huán)繞圖片之外，我們還應(yīng)該將CSS float用于其他任何用途嗎？不。但是，我們是否應(yīng)該立即清除網(wǎng)絡(luò)上所有CSS float聲明，因?yàn)樗患兇猓皇恰罢_”的做法？同樣也不。

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

這很好。

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