1. 前言
很長一段時間以來，浮動元素是我們所有web佈局方案的基礎。儘管如今主流的佈局方案爲彈性盒佈局和柵格佈局，但浮動仍是佈局中常用的方法。浮動的概念很簡單，向左浮動、向右浮動或者不浮動，但深究其詳細規則卻不容易。(浮動的用法傳送門)
2. 包含塊(containing block)
在開始深入研究浮動的細節之前，首先要建立一個包含塊(containing block)的概念。浮動元素的包含塊是最近的塊級祖先元素。因此下面的標記中，浮動元素<img>的包含塊是包含它的父級塊元素<p>。此外，設爲浮動的元素也會自動變爲塊元素"display:block;"，瀏覽器自動忽略其他的display值。
<p>
This is paragraph text, but you knew that. Within the content of this
paragraph is an image that's been floated. <img src="testy.gif"
style="float: right;"> The containing block for the floated image is
the paragraph.
</p>
3. 浮動位置擺放規則
下面進入正題。
規則一
浮動元素的外緣可能不在其包含塊的內緣上。通常，浮動元素會按下圖方式進行排列，向左浮動儘量向左移動，向右浮動儘量向右移動，但是當碰到其他浮動元素就不能保證該元素可以移動到包含塊的盡頭了。
在本圖和隨後的圖中，帶圓圈的數字顯示標記元素相對於源實際出現的位置，帶編號的框顯示浮動可見元素的位置和大小。
規則二
浮動元素的左外緣必須位於文檔源中較早出現的左浮動元素的右外緣的右側，除非後一個元素的頂部位於前一個元素的底部以下。同樣地，浮動元素的右外緣必須位於文檔源中較早出現的右浮動元素的左外緣的左側，除非後一個元素的頂部低於前一個元素的底部。此規則防止浮動元素相互“覆蓋”。如果一個元素浮動到左側，並且另一個浮動元素已經存在，則後一個元素將放置在前一個浮動元素的右外緣。但如果浮動元素的頂部位於所有先前浮動圖像的底部下方，然後它可以一直浮動到父元素的左內邊緣。例子如下圖所示。
規則三
向左浮動元素的右邊緣可能在向右浮動元素左邊緣的右側，因此向右浮動的元素會下移。話聽起來很拗口，看圖就明白了。
規則四
浮動元素的頂部不能高於任何早期浮動或塊級元素的頂部。浮動元素不會一直浮動到其父元素的頂部，浮動元素的頂部不可能比之前出現的浮動元素的頂部高。如下圖所示，由於浮動元素2數被迫低於浮動元素1，所以浮動元素3的頂部與浮動元素2是平的。
規則五
浮動元素的頂部不能高於任何由文檔源中較早出現元素的行框頂部。與規則四類似，此規則防止元素位於之前內容的行框頂部之上，進一步限制了元素的向上浮動。假設在段落的中間有一個浮動圖像，該圖像頂部可放置的最高位置是圖像來源線框的頂部，如圖所示，這樣可以防止圖像向上浮動太遠。
規則六
如果左浮動元素的左側有另一個浮動元素，則其右外緣可能不會位於包含塊的右邊緣的右側。同樣，右邊有另一個浮動元素的右浮動元素的右外邊可能不在其包含塊的左邊緣的左邊。意思同樣很拗口，看圖就明白了，浮動元素也會換行，一行放不下就會另起一行。
規則七
浮動元件必須放置在儘可能高的位置。
規則八
左浮動元素儘可能放在最左邊，右浮動元素儘可能放在最右邊。。
規則七和規則八是浮動元素最基本的規則。