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

　　盡管我們現在用浮動布局已經很少了，但是在一些特殊的需求下，它仍然是唯一可行的解決方案。在這些少見的需求中，浮動元素真正的表現形式并非像我想的那樣，這使我倍受挫敗。所以我決定研究一下浮動行為的規則，從而可以適當地去使用它。

浮動的規則

　　float屬性總共可以設置四種值：

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

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

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

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

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

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

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

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

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

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

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

　　一個小學生注：作者的這種說法并不嚴謹。她僅驗證了段落時的情況。而真實情況是這樣的：

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

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

　　經常有人會遇到浮動元素在IE6下換行的bug，根據上面的規則，只要把浮動元素放置在非浮動元素的前面，這個bug自然會迎刃而解了。

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

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

<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.?相對于盡可能地靠近父元素的左側和右側，浮動元素更傾向于靠近其頂部。

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

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

　　6.?浮動元素不應溢出其父元素。

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

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

浮動的清除

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

.foo {clear: left | right | both }

　　當一個元素擁有clear:left屬性時，這意味著這個元素必須位于向左浮動的元素之下。如果一個元素的clear屬性為both時，它必須位于任意浮動元素之下。

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

<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

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

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

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

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

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

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

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

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

　　（全文完）

轉載于:https://www.cnblogs.com/dongtianee/p/css-float.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。