CSS 浮動(dòng)

請(qǐng)看下圖，當(dāng)把框 1 向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣：

再請(qǐng)看下圖，當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。

如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。

如下圖所示，如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”：

CSS float 屬性

在 CSS 中，我們通過(guò) float 屬性實(shí)現(xiàn)元素的浮動(dòng)。

如需更多有關(guān) float 屬性的知識(shí)，請(qǐng)?jiān)L問(wèn)參考手冊(cè)：CSS float 屬性。

行框和清理

浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框。

因此，創(chuàng)建浮動(dòng)框可以使文本圍繞圖像：

要想阻止行框圍繞浮動(dòng)框，需要對(duì)該框應(yīng)用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

為了實(shí)現(xiàn)這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動(dòng)框下面：

這是一個(gè)有用的工具，它讓周?chē)脑貫楦?dòng)元素留出空間。

讓我們更詳細(xì)地看看浮動(dòng)和清理。假設(shè)希望讓一個(gè)圖片浮動(dòng)到文本塊的左邊，并且希望這幅圖片和文本包含在另一個(gè)具有背景顏色和邊框的元素中。您可能編寫(xiě)下面的代碼：

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

這種情況下，出現(xiàn)了一個(gè)問(wèn)題。因?yàn)楦?dòng)元素脫離了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間。

如何讓包圍元素在視覺(jué)上包圍浮動(dòng)元素呢？需要在這個(gè)元素中的某個(gè)地方應(yīng)用 clear：

不幸的是出現(xiàn)了一個(gè)新的問(wèn)題，由于沒(méi)有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能添加一個(gè)空元素并且清理它。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

這樣可以實(shí)現(xiàn)我們希望的效果，但是需要添加多余的代碼。常常有元素可以應(yīng)用 clear，但是有時(shí)候不得不為了進(jìn)行布局而添加無(wú)意義的標(biāo)記。

不過(guò)我們還有另一種辦法，那就是對(duì)容器 div 進(jìn)行浮動(dòng)：

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

這樣會(huì)得到我們希望的效果。不幸的是，下一個(gè)元素會(huì)受到這個(gè)浮動(dòng)元素的影響。為了解決這個(gè)問(wèn)題，有些人選擇對(duì)布局中的所有東西進(jìn)行浮動(dòng)，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點(diǎn)的頁(yè)腳）對(duì)這些浮動(dòng)進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。

事實(shí)上，W3School 站點(diǎn)上的所有頁(yè)面都采用了這種技術(shù)，如果您打開(kāi)我們使用 CSS 文件，您會(huì)看到我們對(duì)頁(yè)腳的 div 進(jìn)行了清理，而頁(yè)腳上面的三個(gè) div 都向左浮動(dòng)。