原文：all about floats
譯文：關(guān)于浮動(dòng)的前世今生
版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，多謝??！

什么是浮動(dòng)？

浮動(dòng)是 css 的定位屬性。我們可以看一下印刷設(shè)計(jì)來了解它的起源和作用。印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環(huán)繞”。
這是一個(gè)例子：

在排版軟件里面，存放文字的盒子可以被設(shè)置為允許圖文混排，或者無視它。無視圖文混排將會(huì)允許文字出現(xiàn)在圖片的上面，就像它甚至不會(huì)在那里一樣。這就是圖片是否是頁面流的一部分的區(qū)別。網(wǎng)頁設(shè)計(jì)與此非常類似。

在網(wǎng)頁設(shè)計(jì)中，應(yīng)用了CSS的float屬性的頁面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動(dòng)的元素仍然是網(wǎng)頁流的一部分。這與使用絕對(duì)定位的頁面元素相比是一個(gè)明顯的不同。絕對(duì)定位的頁面元素被從網(wǎng)頁流里面移除了，就像印刷布局里面的文本框被設(shè)置為無視頁面環(huán)繞一樣。絕對(duì)定位的元素不會(huì)影響其它元素，其它元素也不會(huì)影響它，無論它是否和其它元素挨著。

像這樣在一個(gè)元素上用CSS設(shè)置浮動(dòng)：

#sidebar { float: right; }

fload屬性有四個(gè)可用的值：Left 和Right 分別浮動(dòng)元素到各自的方向，None (默認(rèn)的) 使元素不浮動(dòng)，Inherit 將會(huì)從父級(jí)元素獲取float值。

浮動(dòng)的用處

除了簡單的在圖片周圍包圍文字，浮動(dòng)可用于創(chuàng)建全部網(wǎng)頁布局。

浮動(dòng)對(duì)小型的布局同樣有用。例如頁面中的這個(gè)小區(qū)域。如果我們?cè)谖覀兊男☆^像圖片上使用浮動(dòng)，當(dāng)調(diào)整圖片大小的時(shí)候，盒子里面的文字也將自動(dòng)調(diào)整位置：

同樣的布局可以通過在外容器使用相對(duì)定位，然后在頭像上使用絕對(duì)定位來實(shí)現(xiàn)。這種方式中，文本不會(huì)受頭像圖片大小的影響，不會(huì)隨頭像圖片的大小而有相應(yīng)變化。

清除浮動(dòng)

清除(clear)是浮動(dòng)(float)的相關(guān)屬性.一個(gè)設(shè)置了清除浮動(dòng)的元素不會(huì)如浮動(dòng)所設(shè)置的一樣，向上移動(dòng)到浮動(dòng)元素的邊界，而是會(huì)忽視浮動(dòng)向下移動(dòng)。如下，一圖頂千言。

上例中，側(cè)欄向右浮動(dòng)，并且短于主內(nèi)容區(qū)域。頁腳(footer)于是按浮動(dòng)所要求的向上跳到了可能的空間。要解決這個(gè)問題，可以在頁腳(footer)上清除浮動(dòng)，以使頁腳(footer)待在浮動(dòng)元素的下面。

#footer { clear: both; }

清除(clear)也有4個(gè)可能值。最常用的是 both，清楚左右兩邊的浮動(dòng)。left 和 right 只能清楚一個(gè)方向的浮動(dòng)。none 是默認(rèn)值，只在需要移除已指定的清除值時(shí)用到。inherit 應(yīng)該時(shí)第五個(gè)值，不過很奇怪的是 IE 不支持(這個(gè)不奇怪吧，IE 從來都這么特立獨(dú)行吧 －糖伴西紅柿注)。只清除左邊或右邊的浮動(dòng)，實(shí)際中很少見，不過絕對(duì)有他們的用處。