英文原文：HOW FLOATING WORKS
譯者：@風兒箏2014
譯文源自：http://www.w3cplus.com/css/how-floating-works.html
雖然現在很少使用浮動，但在某些情況下，浮動是唯一可行的解決方案。偶爾會覺得很沮喪，因為我覺得浮動應該起作用但是它并沒有。所以我決定研究下浮動的工作原理以及如何正確的使用浮動。
浮動的規則
浮動有四個屬性值可以設置：
.foo{
float: left | right | inherit | none
}
每個屬性值是如何影響浮動元素在其父元素或文檔內的擺放，通常是由下面的規則決定的：
浮動元素的父元素是不可見的
浮動元素會脫離文檔流，不會繼續停留在其父元素內。如果一個父元素只有一個子元素，那么它將會塌陷，就像是空的一樣。就表現而言，就有點類似于子元素做了絕對定位。
.parent {
position: relative;
padding: 10px;
}
.child {
float: left
}
左浮動/右浮動元素會盡量接近父元素的頂部和左邊/右邊
這是左浮動/右浮動元素試圖實現的“最佳”位置。
前面的元素會將浮動元素向下推
雖然浮動元素會盡量靠近父元素的頂部，然而文檔中浮動元素前面的兄弟元素會把浮動元素向下推。無論前面的元素是內聯元素還是塊元素。
也就是說如果我們在浮動元素之前或之后有一個段落，會得到不同的結果。
前面的浮動元素得到更“好”的位置
在規則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>
接近于父元素的頂部優先于左邊/右邊
當有多個浮動元素向同一個方向浮動時，隨后的元素為了更接近父元素的頂部，將會選擇遠離父元素左邊/右邊的位置。
這就意味著多個浮動元素將盡可能并排排列，只有當父元素的寬度不能容納它們，它們才會移動到下面。
在這個例子中，元素2比元素3擁有更好的位置。
浮動元素不能延伸到它的父元素外面
左浮動的元素不會延伸到父元素的左邊緣外。
左浮動的元素不應該延伸到父元素的右外邊緣外，除非父元素沒有剩余的空間。
清除浮動
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實現的。下面的樣式應用于浮動元素的父元素或緊隨其后的兄弟元素。
.cf::after {
content:"";
display:table;
clear:both;
}
