摘要：另一種元素是內(nèi)聯(lián)元素，它們會(huì)與之前的內(nèi)容保持顯示在一行。即使圖片是內(nèi)聯(lián)元素，它們也被它們的父塊級(jí)元素列表項(xiàng)控制。當(dāng)一行中多個(gè)元素被浮動(dòng)，它們會(huì)產(chǎn)生同內(nèi)聯(lián)元素的流類似的效果。浮動(dòng)元素不能高過前一行內(nèi)聯(lián)元素。

浮動(dòng)到底是做什么呢？他們是如何影響相關(guān)元素的盒模型的呢？浮動(dòng)的元素與內(nèi)聯(lián)元素有什么不同呢？制定浮動(dòng)元素的位置的具體規(guī)則是什么？clear屬性是如何工作的，并且它的作用是什么？

即使是經(jīng)驗(yàn)豐富的開發(fā)者也會(huì)在浮動(dòng)上出錯(cuò)，所以理解浮動(dòng)的行為能幫你擺脫面對(duì)CSS的很多困擾。即使你認(rèn)為你已經(jīng)了解了關(guān)于浮動(dòng)的所有知識(shí)，我們也會(huì)深入到你可能會(huì)學(xué)習(xí)到新知識(shí)的地步。

在CSS中一些元素是塊級(jí)元素，他們會(huì)自動(dòng)啟用新的一行。例如，如果你創(chuàng)建2個(gè)多帶帶的單詞段落元素，它們不會(huì)相互流入而會(huì)各自出現(xiàn)在多帶帶的一行。另一種元素是內(nèi)聯(lián)元素，它們會(huì)與之前的內(nèi)容保持顯示在“一行”。舉個(gè)例子，有個(gè)錨標(biāo)簽，它可以出現(xiàn)在像段落這個(gè)元素之內(nèi)而且不會(huì)造成任何額外的空白，也不會(huì)另起一行。

改變這種布局模型的一種方式是使用浮動(dòng)，它允許給定的元素挪動(dòng)到它那一行的一側(cè)，并且其他內(nèi)容向下流動(dòng)。一個(gè)右浮動(dòng)的元素將被推動(dòng)直到它的容器的右側(cè)，并且內(nèi)容會(huì)沿著它的左側(cè)向下流動(dòng)，一個(gè)有浮動(dòng)的元素會(huì)被挪動(dòng)到左側(cè)，內(nèi)容會(huì)沿著它的右側(cè)向下流動(dòng)。

有一個(gè)經(jīng)典的例子是當(dāng)你將一張圖片放進(jìn)一段落里，并且想讓兩者并排出現(xiàn)而不是堆疊。首先，我們用HTML創(chuàng)建兩個(gè)元素：

Lorem ipsum...

僅僅這樣并不能出現(xiàn)我們想要的效果。段落元素是一個(gè)塊級(jí)元素，它會(huì)獨(dú)自占一行，所以段落和圖片會(huì)顯示在正常的文檔流。

我們可以通過將圖片浮動(dòng)到右邊來改變顯示。這種CSS非?；A(chǔ)：

img {
    float: right;
    margin: 20px;
}

有了這段代碼，我們的圖片會(huì)被挪到它這一行的右邊，段落文字會(huì)在它的左邊向下流動(dòng)。

有趣的是，這張圖片在被浮動(dòng)時(shí)，我們其他的內(nèi)容將會(huì)盡可能的嘗試圍繞它出現(xiàn)。如果改變我們?nèi)萜鞯拇笮』蛘邔g覽器窗口變窄，文本只是簡單的自我重排而不會(huì)觸碰到圖片。

可能你對(duì)這種行為已經(jīng)有了很好的理解。然而，為了更充分利用浮動(dòng)，你需要更深層次的理解這兩個(gè)元素之間的交互。例如，我們?cè)趺丛诙温浜蛨D片之間添加額外的空白？你可能認(rèn)為這樣可行

p {margin: 20px;}

然而，這不會(huì)在圖片和段落之間產(chǎn)生甚至一像素額外的空白。相反，我們?yōu)閳D片應(yīng)用了這些空白：

img {margin: 20px;}

你應(yīng)該問自己一個(gè)問題，“為什么？”為什么增加段落的margin不會(huì)在圖片和段落之間增加空白？因?yàn)槲覀儧]有掌握屬于段落的盒模型。

如果你曾懷疑你的布局是怎么在基本層面上工作的，試著應(yīng)用一兩個(gè)邊框來看看將發(fā)生什么。如果我們?cè)谶@個(gè)段落上這樣做，結(jié)果可能會(huì)讓你驚訝，

p {
    border: solid 1px black;
}

正如你所看到的，圖片實(shí)際上在段落的盒子里面！這解開了我們的邊界空白疑惑。我們給段落添加的任何空白都被應(yīng)用到了圖片的右邊，這就是為什么在圖片和段落之間不會(huì)增加空白。

如果我們想改變這種行為，讓段落不再圍繞圖片，我們可以讓段落浮動(dòng)到左邊，并給他指定寬度（沒有表示寬度，段落將會(huì)是100%的寬，將不會(huì)布置在圖片旁邊）。

現(xiàn)在我們知道了浮動(dòng)是做什么的，以及它是怎么影響所涉及的元素的盒子的。讓我們繼續(xù)討論另一塊可能很多開發(fā)者都不了解的信息：控制浮動(dòng)元素位置的規(guī)則。

通常在圖片集或者特征列表中開發(fā)人員會(huì)用浮動(dòng)來控制列表項(xiàng)的位置。我們創(chuàng)建一個(gè)簡單的純圖片的列表來看看這是怎么工作的。

默認(rèn)情況下，所有的列表項(xiàng)都顯示在一個(gè)大的垂直棧里，這意味著它們是塊級(jí)元素。即使圖片是內(nèi)聯(lián)元素，它們也被它們的父塊級(jí)元素列表項(xiàng)控制。為了解決這種問題，我們要使列表項(xiàng)左浮動(dòng)。當(dāng)一行中多個(gè)元素被浮動(dòng)，它們會(huì)產(chǎn)生同內(nèi)聯(lián)元素的流類似的效果。然而，正如我們所看到的，有一些關(guān)鍵的區(qū)別。

li {
    float: left;
    margin: 4px;
}

現(xiàn)在，如果我們所有的圖片都是同樣的高度，這只是一個(gè)非常普通的例子。這個(gè)結(jié)果看起來就像是一個(gè)簡單的從左到右按順序排列的圖片集：

然而，我們的圖片并不是同樣的高度，一些高100px，其他的高150px。這會(huì)造成非常古怪的結(jié)果。

我第一次看到這種結(jié)果的時(shí)候感到很困惑。這里的世界到底發(fā)生了什么？為什么圖片4會(huì)像那樣在右邊？難道它不應(yīng)該自己試著盡可能讓自己浮動(dòng)到左邊？如果我們?nèi)サ暨@些列表項(xiàng)的浮動(dòng)，用display:inline來替代，結(jié)果是截然不同的。

li {
  display: inline;
}

跟最開始相比，這個(gè)例子的不同之處在于圖片的默認(rèn)狀態(tài)是沿著它們的底部邊緣垂直對(duì)齊。這會(huì)使它們同之前的例子看起來非常不一樣，但是我們可以使用一行CSS來解決這個(gè)問題：

img{
    vertical-align: top;
}

現(xiàn)在看起來比較像浮動(dòng)示例了，只會(huì)顯示有一個(gè)可預(yù)測順序的內(nèi)聯(lián)列表項(xiàng)。當(dāng)x軸沒有下一項(xiàng)的空間時(shí)，它會(huì)返回到下一行的左側(cè)。

所以，我們的浮動(dòng)圖片集為什么沒有像這樣顯示呢？為什么浮動(dòng)的列表項(xiàng)被奇怪的巫術(shù)控制？

事實(shí)證明，CSS規(guī)范列出了九條規(guī)則來規(guī)定浮動(dòng)的行為。這個(gè)清單的問題在于即使是被寫出來了，也只有無聊的人才能去理解它。這里是一個(gè)從其中一個(gè)規(guī)則中引用的：

“If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.”

也許你的閱讀理解能力比我要強(qiáng)，但是這個(gè)還有其他的規(guī)則都讓我頭暈。所有說什么左外邊緣在右外邊緣的右邊的言論都是非常平常的東西，卻被裝扮得聽起來十分復(fù)雜。為了你們的方便，Josh Johnson將浮動(dòng)表現(xiàn)翻譯成英文并總結(jié)了九條規(guī)則，看起來更簡單一點(diǎn)。

浮動(dòng)元素會(huì)被推到他的容器的邊緣。

任何浮動(dòng)元素都會(huì)出現(xiàn)在他之前的浮動(dòng)元素的旁邊或是下方。如果元素都是左浮動(dòng)，那么第二個(gè)元素將會(huì)出現(xiàn)在第一個(gè)元素的右邊，如果都是右浮動(dòng)，第二個(gè)元素會(huì)出現(xiàn)在第一個(gè)元素的左邊。

左浮動(dòng)的盒子不能出現(xiàn)在右浮動(dòng)盒子的右邊。

浮動(dòng)元素不能高過他的容器的上邊緣（當(dāng)涉及到塌陷的邊距這將會(huì)更復(fù)雜，請(qǐng)參考最初的規(guī)則）。

浮動(dòng)元素不能比前一個(gè)塊級(jí)元素或浮動(dòng)元素高。

浮動(dòng)元素不能高過前一行內(nèi)聯(lián)元素。

靠著另一個(gè)浮動(dòng)元素的浮動(dòng)元素不能超出自己的父容器邊緣。

一個(gè)浮動(dòng)的盒子必須盡可能的高的放置。

一個(gè)左浮動(dòng)的盒子必須盡可能左的放置，一個(gè)右浮動(dòng)的盒子要盡可能的右的放置。盡可能高的位置的優(yōu)先級(jí)比左右高。

我們可以看做這些大多數(shù)都是常識(shí)，但他們也要被明確聲明出來以便每個(gè)人在每個(gè)瀏覽器上看到同樣的頁面?；旧蟻碚f，這種情況的要點(diǎn)就是浮動(dòng)元素會(huì)被指定到具體的邊緣（左或者右），沒有過多的要求。除非在他之前有另一個(gè)浮動(dòng)元素，他就會(huì)與那個(gè)浮動(dòng)元素相鄰。

真正讓我們感到困惑的是最后的規(guī)則，它表明了浮動(dòng)元素盡可能的保持高的位置，并且垂直定位規(guī)則比水平的左右規(guī)則在將元素推到邊緣時(shí)優(yōu)先級(jí)更高。

在我們之前的例子中，數(shù)字2的圖片把行的高度撐開了，以至于在數(shù)字3圖片之后仍然有一些垂直的空間使得數(shù)字4圖片擠了進(jìn)去。即使是考慮到這些規(guī)則，這種模式也不容易被預(yù)測到。

請(qǐng)記住，當(dāng)你有一個(gè)浮動(dòng)元素時(shí)，后面緊接著的浮動(dòng)元素至少要占據(jù)與之前同樣或者更多的垂直高度來打破這一行使得流動(dòng)下移。

關(guān)于我們?cè)谶@里提出的規(guī)則的最后一點(diǎn)。第2條規(guī)則會(huì)對(duì)那些浮動(dòng)元素產(chǎn)生有趣的影響。假設(shè)，我們有六張從一到六的數(shù)字圖片，如下：

如果我們將這些圖片浮動(dòng)到左邊，他們會(huì)按順序出現(xiàn)，從一開始直到六，從左到右，從上到下。但是，如果我們將這些圖片右浮動(dòng)。

正如你所看到的，第一張圖片被放到了最右邊的位置。類似的，在換行時(shí)，第四張圖片也被放置到了右邊。這就是為什么你很少看到有人將導(dǎo)航元素右浮動(dòng)。弄出了這樣螺旋狀的順序就需要HTML結(jié)構(gòu)做出不受歡迎的改變來解決。

浮動(dòng)對(duì)于完成一些類似于創(chuàng)造內(nèi)容列這樣的布局很有用。但是，一旦浮動(dòng)被聲明，他們就會(huì)對(duì)剩下的文檔的產(chǎn)生一些或許你喜歡或者不喜歡的影響。例如，我們想在我們之前提及的那種左浮動(dòng)的列表塊之后加一個(gè)段落。

結(jié)果或許并不是你所期望的：

這里的結(jié)果是使用clear屬性，讓沒有浮動(dòng)的元素可以出現(xiàn)在他所應(yīng)用的元素給定的一側(cè)。例如，比如我們?cè)谖覀兊男D庫列表的第二項(xiàng)添加clear: left.

ul li:nth-child(2) {
  clear: left;
}

這段代碼告訴瀏覽器，第二項(xiàng)的頂部必須位于他之前的任意左浮動(dòng)項(xiàng)的底部之下（在這個(gè)例子中，是第一項(xiàng)）。如果我們將所有元素都右浮動(dòng)，我們就要使用clear: right。

請(qǐng)注意，在此之后，剩下的浮動(dòng)元素都會(huì)保持他們的位置。因?yàn)樗麄內(nèi)匀槐辉O(shè)置的左浮動(dòng)，清除屬性并沒有取消他們的表現(xiàn)。這意味著我們的問題不能通過清除列表任意項(xiàng)的浮動(dòng)來解決。

相反，必須被清除的是段落元素，他是一個(gè)沒有被浮動(dòng)的塊級(jí)元素。這將確保他會(huì)出現(xiàn)在浮動(dòng)元素的下面而不是旁邊。

p {
    clear: both;
}

從技術(shù)上來講，我們只需要清除這里的左浮動(dòng)，但是當(dāng)一個(gè)開發(fā)者想要確保清除所有浮動(dòng)時(shí)，通常會(huì)看到clear的值被設(shè)置為both。這個(gè)變化能非常好的解決我們的問題。

當(dāng)一個(gè)給定的元素只包含浮動(dòng)元素時(shí)會(huì)產(chǎn)生奇怪的現(xiàn)象：父元素的高度會(huì)坍塌。舉例說明，假設(shè)我們想在所有示例中的無序列表給定背景色。如果列表的元素沒有被浮動(dòng)，我們就只需要應(yīng)用一下CSS來添加背景。

ul {
    background: gray;
}

正如你所看到的，定義的無序列表的框已經(jīng)變成了灰色，并且列表中的每一項(xiàng)都堆疊在一起。

然而，在第二個(gè)例子中，我們浮動(dòng)了所有列表項(xiàng)，UL只包含了浮動(dòng)的元素，導(dǎo)致它的高度坍塌，這會(huì)讓新手開發(fā)者驚訝它的背景色到底發(fā)生了啥。

有一些方法可以解決這個(gè)問題，最簡單容易的方法是為無序列表的父元素明確指定高度。

ul {
  height: 300px;
}

正如你所看到的，這的確能讓我們的背景重新被填滿。然而，從長遠(yuǎn)來看這并不是一個(gè)可取的辦法，如果高度是基于內(nèi)容自動(dòng)計(jì)算的話。如果我們要添加三個(gè)或者更多的圖片到列表庫里，高度就會(huì)不足。

這里術(shù)語clear fix，也叫clearfix，就開始發(fā)揮作用啦。清除浮動(dòng)通過使用clear屬性來解決高度坍塌的問題。

開發(fā)者在他們的HTML中創(chuàng)建一個(gè)跟浮動(dòng)元素同級(jí)的空元素（常常是一個(gè)div），然后給空容器添加一個(gè)命名為clearfix的class。我們回到CSS中，給clearfix添加清除浮動(dòng)的屬性。

.clearfix {
  clear: both;
}

立刻就解決了高度坍塌的問題：

根據(jù)我們已經(jīng)學(xué)過的可以知道為什么這個(gè)方法可以解決我們的問題。高度坍塌的原因是因?yàn)楦冈刂话烁?dòng)元素的，現(xiàn)在他有了一個(gè)子元素，盡管這個(gè)子元素是空的，但是它沒有浮動(dòng)，所以高度會(huì)再次跟預(yù)期一樣自動(dòng)生成。

這個(gè)方法有個(gè)問題是，沒有人喜歡HTML中額外的丑陋的元素。它根本不是語義的，意味著它不能清晰的傳遞頁面的層次結(jié)構(gòu)。

新的解決方案是利用overflow屬性，這個(gè)屬性控制了超出其包含框邊界的內(nèi)容的功能。如果你將父項(xiàng)目的overflow設(shè)置為hidden或者auto，也能解決高度坍塌。

ul {
  overflow: auto;
}

這絕對(duì)是解決高度坍塌問題的最簡單、最優(yōu)雅的方案，也應(yīng)該是你的方案。雖然這么說，那在某種情況，你想將元素的overflow設(shè)置為visible，你又應(yīng)該怎么做呢？

這樣的結(jié)果可以使用Nick Gallagher的微型清除浮動(dòng)hack，他使用了一下天才般的CSS來解決這個(gè)問題。首先，他是使用的:before以及:after來添加一些內(nèi)容，我們可以用來為父元素創(chuàng)建一些不浮動(dòng)的元素。然而，你不想在這里使用真實(shí)的內(nèi)容，所以我們使它為空并且設(shè)置display為table來創(chuàng)建一個(gè)匿名框（空的而且不占空間）最后使用我們的老朋友clear。它創(chuàng)建了一個(gè)不可見的塊級(jí)元素來解決高度坍塌的問題并且沒有添加額外的HTML。IE的老版本需要自己修復(fù)。

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

文章中，我們討論了大量的信息，包括基礎(chǔ)和復(fù)雜的。我們從最開始討論如何浮動(dòng)，以及他們?cè)诨緦蛹?jí)是如何工作的，然后是如何設(shè)置元素的浮動(dòng)來影響元素所涉及的盒子邊框，讓你找出怎么樣工作才能根據(jù)你想的那樣獲得邊距。

接著，我們討論了浮動(dòng)元素的基本規(guī)則，并得出了一些有趣的結(jié)論，就是不同高度的浮動(dòng)元素如何定位，以及右浮動(dòng)的元素怎么以相反的順序出現(xiàn)。

如果在閱讀本篇文章之前，浮動(dòng)讓你感覺到很困惑，那么開始閱讀吧。它們最開始就迷惑了我們。希望你現(xiàn)在以及了解了浮動(dòng)是怎么工作的，以及知道如何使用它們來實(shí)現(xiàn)你想要的布局。如果你覺得這些信息有幫助，請(qǐng)?jiān)谙旅媪粝略u(píng)論讓我們知道。