原文：http://bitsofco.de/2015/how-floating-works/，作者?Ire Aderinokun 發(fā)表于 2015 年 8 月 11 日。

　　盡管我們現(xiàn)在用浮動布局已經(jīng)很少了，但是在一些特殊的需求下，它仍然是唯一可行的解決方案。在這些少見的需求中，浮動元素真正的表現(xiàn)形式并非像我想的那樣，這使我倍受挫敗。所以我決定研究一下浮動行為的規(guī)則，從而可以適當(dāng)?shù)厝ナ褂盟?/p>

浮動的規(guī)則

　　float屬性總共可以設(shè)置四種值：

.foo {float: left | right | inherit | none }

　　下面這些規(guī)則定義了某元素設(shè)置為以上幾種浮動值時，分別該如何在其父元素乃至文檔中進行定位。

　　1.?浮動元素對于其父元素“不可見”。

　　實際上，浮動元素會脫離其父元素。如果一個父元素僅包裹一個浮動的子元素，它會像空元素那樣沒有任何高度。這與其只包裹著一個絕對定位元素時的表現(xiàn)是非常類似的。

.parent {position: relative;padding: 10px; } .child {float: left }

　　2.?向左/右浮動的元素，總是會盡可能地向其父元素的頂部及左/右部靠攏。

　　一個向左或向右浮動的元素總是會想辦法占據(jù)這個“最佳”位置。

　　3.?如果浮動元素之前定義了一個兄弟元素，那么浮動元素會換行顯示。

　　盡管浮動元素會盡可能地靠近父元素的頂部，但是如果有任意的非浮動的兄弟元素位于其之前，浮動元素便會被擠下去。無論這個兄弟元素是行內(nèi)元素還是塊元素。這就意味著如果我們定義一個浮動元素位于一個段落之前和之后，得到的結(jié)果是完全不同的。

浮動元素位于段落元素之前

浮動元素位于段落元素之后

　　一個小學(xué)生注：作者的這種說法并不嚴(yán)謹(jǐn)。她僅驗證了段落時的情況。而真實情況是這樣的：

如果浮動元素位于非浮動元素之前
非浮動元素的類型	瀏覽器類型	結(jié)果
塊級元素	IE8、8+、chrome等現(xiàn)代瀏覽器	永不換行
塊級元素	IE7 -	不換行，但當(dāng)快級元素被顯性設(shè)置寬度且寬度足夠大，父容器不足以在同行排列其與浮動元素時，其會換行位于浮動元素之下。
行內(nèi)級元素	IE8、8+、chrome等現(xiàn)代瀏覽器	永不換行
行內(nèi)級元素	IE7 -	永不換行
如果浮動元素位于非浮動元素之后
非浮動元素的類型	瀏覽器類型	結(jié)果
塊級元素	IE8、8+、chrome等現(xiàn)代瀏覽器	永遠(yuǎn)換行
塊級元素	IE7 -	永遠(yuǎn)換行
行內(nèi)級元素	IE8、8+、chrome等現(xiàn)代瀏覽器	不換行，但當(dāng)父容器寬度不足以在同行排列兩者時，會換行。
行內(nèi)級元素	IE7 -	永遠(yuǎn)換行

　　如果你想親自實驗一下，猛戳這個測試地址。

　　經(jīng)常有人會遇到浮動元素在IE6下?lián)Q行的bug，根據(jù)上面的規(guī)則，只要把浮動元素放置在非浮動元素的前面，這個bug自然會迎刃而解了。

　　4.?預(yù)先定義的浮動元素可以享受到更佳的位置。

　　在HTML標(biāo)簽中，越靠前的浮動元素越能享受規(guī)則2中提到的“最佳”位置。例如，假如現(xiàn)在有一些向右浮動的元素，按照HTML中定義的順序，第一個元素會呈現(xiàn)在最右側(cè)，因為最右側(cè)是離父元素最近的，是“最佳”位置。

<div class="container"> <div class="right">1</div><div class="right">2</div><div class="right">3</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </div>

　　5.?相對于盡可能地靠近父元素的左側(cè)和右側(cè)，浮動元素更傾向于靠近其頂部。

　　當(dāng)同一個方向（左/右）有多個浮動元素時，靠后者會選擇遠(yuǎn)離父元素左/右側(cè)，從而盡可能地接近父元素的頂部。這意味著多個相鄰的浮動元素會盡可能地一個挨一個地排成一行展示，僅當(dāng)父元素的寬度不足以包裹它們時，后定義的浮動元素才會被擠下去。

　　在這個例子中，相比于元素3，元素2取得了更佳的位置。

　　6.?浮動元素不應(yīng)溢出其父元素。

　　一個向左浮動的元素不可以超出其父元素的左側(cè)邊。

　　一個向左浮動的元素不應(yīng)該超出父元素的右側(cè)邊，除非父元素實在沒有位置容納下它。

浮動的清除

　　clear屬性常常伴隨著float屬性而存在。它使我們可以打破浮動元素為文檔流帶來的變化。我們可以把它設(shè)置為以下三個值：

.foo {clear: left | right | both }

　　當(dāng)一個元素?fù)碛衏lear:left屬性時，這意味著這個元素必須位于向左浮動的元素之下。如果一個元素的clear屬性為both時，它必須位于任意浮動元素之下。

　　如果一個元素僅僅清楚了左側(cè)或右側(cè)的浮動，那么向另一側(cè)浮動的元素不會受此影響。

<div class="container"> <div class="left">1</div><div class="left">2</div><div class="left">3</div><div class="right">1</div><div class="right">2</div><div class="right">3</div><p class="clear-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </div>

Clearfix

　　我們常常對如何合適地清楚浮動有很多困惑，特別是應(yīng)付那些古老的瀏覽器時。我用過的一個非常流行的清除浮動的方法是CSS Mojo中寫的，他將下面的樣式賦予浮動元素的父元素或者任意在它之后定義的元素：

.cf::after {content:"";display:table;clear:both; }

　　至于為什么這樣來使用這些樣式，你可以從這篇博客中找到答案。從本質(zhì)上來說，這個方法也是通過創(chuàng)建了一個不可見的偽元素來達到清除浮動的目的。

　　一個小學(xué)生注：我們之前一直用的clearfix是這樣的：

.clearfix:after {content: ".";clear: both;visibility: hidden;display: block;height: 0; } .clearfix{ *zoom:1}

　　由于IE7及以下瀏覽器是不支持display：table的，相比于上面作者提到的方式，雖然要多寫幾行樣式。但勝在支持IE8-。在國內(nèi)還是老老實實用這個clearfix比較好。

　　更多清除浮動的方法可以查看這個demo：清除浮動的7種方法

　　注意：上面的.clearfix:after一定要用單冒號，CSS3建議我們對偽元素使用雙冒號，與偽類加以區(qū)分。現(xiàn)代瀏覽器識別兩種寫法，但是IE8僅識別單冒號。如果你寫的是雙冒號“.clearfix::after”，由于"*zoom:1"IE8也無法識別，這會導(dǎo)致你的clearfix在IE8中無效。

　　（全文完）

轉(zhuǎn)載于:https://www.cnblogs.com/dongtianee/p/css-float.html

總結(jié)

以上是生活随笔為你收集整理的（译）元素浮动的那些事儿的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。