原文請參考：http://www.w3help.org/zh-cn/kb/011/#addtional_rule
浮動( Float )概述
浮動和文字環繞
浮動框就是一個框在當前行被向左或向右挪動(偏移)，它不在常規流中，浮動框由浮動元素的框組成。 浮動框( 'float', 'floated' or 'floating' box )最有趣的特性是內容(Line Box)可以沿着它的邊緣渲染（設置 'clear' 屬性禁止此特性 ）。 內容排列在沿着左浮動框的右邊排列，而沿着右浮動框的左邊排列，也就是我們常說的文字環繞效果。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>Float example</title>
<style type="text/css">
span {
float: left;
}
P {
margin: 2em;
border: 1px solid red;
width: 200px;
}
</style>
</head>
<body>
<p>
<span style="width:100px; height:100px; background-color:green; margin:20px;"></span>
The IMG box is floated to the left. The content that follows is formatted to the
right of the float, starting on the same line as the float.
</p>
</body>
</html>
文字應當圍繞綠塊的外邊界排列，文字和綠色的塊之間有空白。
示意圖：
浮動框的位置
一個浮動框，會被向左或向右偏移，直到它的外邊界1接觸到它包含塊2的邊界或另一個浮動元素的外邊界1， 如果存在一個行框，浮動框的頂邊會和當前行框的頂部對齊。
如果水平方向沒有足夠的空間放置浮動元素，它將向下移動，直到有足夠的空間或沒有更多的浮動元素爲止。
浮動元素會縮短行框
由於浮動框並不在常規流3中，在該浮動框之前或之後創建的非定位框垂直排列，就好象浮動框並不存在一樣。 然而，浮動框之後創建的行框4會被縮短，爲浮動框提供空間。如果被縮短的行框無法再容納更多的內容， 它將向下移動，直到有足夠的空間或沒有更多的浮動元素爲止。當前行裏浮動框前的任何內容，都將被重新排列到該浮動另一側的第一個可用行裏。 也就是說，如果在遇到左浮動框之前，行內框被放置到行上，剩餘的行框空間足夠容納該左浮動框，那麼，左浮動框就會被放置在該行上， 並與該行框的頂端對齊，然後，已經在行上的行內框被相應地移動到該浮動框的右側（右側成了該左浮動框的另一側），反之亦然，對於 rtl 和右浮動框也是一樣。
如上文字環繞浮動元素的例子，包含文字的行框被縮短，是包含塊減去浮動元素的外邊距 margin 的寬度。其中，"The content" 兩字，分別被放到了兩行， 因爲，一行中的剩餘空間無法再容納 "content"。
TABLE 元素、塊級替換元素、BFC元素和浮動元素
TABLE 元素、塊級替換元素或者在常規流中創建了塊格式化上下文5的元素，它們的 border box1 在同一個塊格式化上下文5中， 一定不能覆蓋任何浮動元素。如果有必要，實現工具應該通過把元素放置到前面浮動元素的下面，以清理先前說到的元素，但是，如果有足夠的空間， 也可以把它緊臨浮動元素放置。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>Float example</title>
<style type="text/css">
#C {
margin: 2em;
border: 1px solid red;
width: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="C">
<div id="A" style="width:50px; height:50px; background-color:green; margin:20px; float:left;">A</div>
<div id="B" style=" width:50px; background-color:blue; overflow:hidden;">B</div>
</div>
</body>
</html>
這時，B 的寬度爲 50px，它和浮動元素 A 的包含塊都是 C，寬度爲 200px。浮動元素在放置後，還有足夠的空間放置 B，所以，B 被緊挨着 A 的 margin 框被放置。
示意圖：
增大 B 的寬度至 150px 後：
注：
- 關於外邊界、border box，請見： W3Help - KB006: CSS 框模型( Box module )
- 關於包含塊，請見： W3Help - KB008: 包含塊( Containing block )
- 關於常規流，請見： W3Help - KB007: 可視化格式模型( visual formatting model )簡介
- 關於行框，請見： KB010: 常規流( Normal flow ) 中的行內格式化上下文中的行框。
- 關於塊格式化上下文，見：KB010: 常規流( Normal flow ) 中的塊格式化上下文的內容。
浮動( Float )特性
| 值 | left | right | none | inherit |
| 初始值 | none |
| 適用於 | 所有元素 |
| 可否繼承 | 否 |
| 百分比 | N/A |
適用元素
可設置給任意元素，但只適用於生成非絕對定位框的元素 1。
特值的含義
- left：該元素產生一個向左浮動的塊框。內容在該框的右邊排列，就是上一篇帖子中所說的文字環繞，起點是框的頂部（會受'clear'屬性的影響）。
- right：與 left 類似，框向右側浮動，內容在該框的左側排列，從頂部開始。
- none：該框不浮動。
注：
- 關於絕對定位和浮動之間的關係，請參見： KB009: CSS 定位體系概述 中的 'display'、'position' 和 'float' 的相互關係部分
浮動( Float )框定位細則
根元素無所謂是否浮動，沒有實際意義，因此對於根元素的浮動，瀏覽器應該當作 "none"。
浮動框定位的宗旨是，在其左、上、右外邊界不溢出包含塊邊界的情況下，儘量的靠上、靠左（"float:left"）或靠右（"float:right"）放置，但是不能高於它前面生成的塊框、浮動框和行框的頂邊，並且不能與其他浮動元素重疊。
以下規則中說到的其他元素，都和浮動元素處於相同的塊格式化上下文 1中。
1. 浮動框不能在其浮動方向上溢出包含塊2
左浮動框的左外邊界3不可以出現在它包含塊2左邊界之左。對於右浮動的元素也有類似規則。
左浮動元素的左外邊界不能溢出包含塊的左邊界。右浮動元素不能溢出包含塊的右邊界。
2. 浮動框的定位受同向浮動框的影響
如果當前框是左浮動框，並且在源文檔中存在更早生成的左浮動框，那麼對於任意這些先前的框，要麼當前框的左外邊出現在先前框的右外邊之右，要麼它的頂部必須在先前框的底部之下。對於向右浮動的框也有類似的規則。
也就是說，當前浮動框的定位會受到先前生成的同向浮動框的影響，它們不能相互遮蓋。當前浮動框需要緊挨着先前同向浮動框的外邊界進行定位，如果當前行空間不足，則折行，放置到它之前浮動框的下面。
3. 浮動框與不同向浮動框不可重疊
左浮動框的右外邊不可以出現在它右側的任何右浮動框的左外邊之右。對於向右浮動的元素也有類似的規則。
也就是說，同一行中不同向的浮動框不能夠有互相摺疊的現象。
4. 浮動框外頂邊界不能溢出包含塊2
浮動框的頂外邊不能高於它包含塊的頂部。另外，當一個浮動框發生在兩個外邊距摺疊的中間時，浮動元素的定位好像它有另一個空的塊級父框位於常規流中。
也就是說，當浮動框處於兩個發生外邊距摺疊的地方時，會被當作包含在一個空的塊框中，它上面和下面的外邊距會穿過它發生外邊距摺疊，當它不存在。
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 50px;
}
</style>
<div>A</div>
<div style="float:left; margin:10px; background-color: red;">O</div>
<div>B</div>
以上代碼中，3 個 DIV 元素的包含塊是初始包含塊。浮動框 O 處於 A 和 B 的中間，不應當妨礙 A 和 B 的外邊距摺疊。
示意圖：
此處在 IE 中存在兼容性問題4，請自行測試。
5. 浮動框的頂邊不可以高於源文檔中先前元素產生的塊框或浮動框的頂
示例代碼：
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 10px 0;
}
</style>
<div style="width:180px; height:auto; overflow:hidden; background:white; border:1px solid gold;">
<div style="float:left;">O</div>
<div style="float:left; background-color: blue;">A</div>
<div style="float:right; width:50px; background-color: red;">B</div>
</div>
O、A、B 都是浮動元素，O、A 是左浮動元素，根據寬度計算，A 應該處於 O 的下一行。B 是右浮動浮動元素。按照標準，B 浮動的時候，其頂邊不應高於 A 的頂邊，因此，B 不會放到 O 的右側顯示。
示意圖：
改變代碼中 A 和 B 的位置，即可讓 B 顯示在 O 的右側，讀者可自行測試。
6. 浮動框與行框
浮動框的頂邊不可以高於源文檔中先前元素產生的任何包含一個框的行框的頂。
<div style="width:400px; height:50px;border:1px solid red;">
<div style="background-color:green; float:left; width:250px;">left</div>
<span style="border:1px solid yellow;">blublublublublublublublublublublublu</span>
<div style="background-color: green; float:right;">right</div>
</div>
示意圖：
按照規則，right 浮動框的頂邊不能高於含有行內框的行框的頂邊。
IE 在處理行框與浮動框之間位置關係時，跟其他瀏覽器不同5，可自行驗證。
7. 浮動框不能因同方向浮動元素而在非浮動方向上溢出包含塊
左浮動框左邊如果有另外一個左浮動框，它的右外邊不可以出現在它包含塊的右邊之右。（或者比較寬鬆的要求是：一個左浮動不可以超出右邊， 除非它已經儘可能地靠左排列。）對於向右浮動的元素也有類似的規則。此條規則也是限定浮動元素的位置範圍， 不可超出包含塊。與第 1，2 條有關。
8. 浮動框要放置得儘可能的高。
注意在前面關於其頂邊規則的限制下，滿足此條。
9. 左浮動框必須儘量靠左放置，右浮動框必須儘量靠右放置。在更高的位置和更靠左或靠右的位置間，選擇前者。
和第 8 條一起，可以算是浮動的大規則，說明浮動框要儘量的向上向左或向上向右放。
10. 附加規則：'clear' 特性值不是 'none' 的浮動框
對於 'clear' 特性值不是 'none' 的浮動框，其上外邊界( top margin edge )必須低於前面所有左浮動框（'clear' 特性值爲 "left" 時），或者右浮動框（"clear:right"），或者左右浮動框("clear:both")的下外邊界。
示例代碼：
<div id="Container" style="width:300px; height:100px; border:1px solid gold; ">
<div id="DIV1" style="float:right; width:150px; height: 50px; background-color:green; ">float:right;</div>
<div id="DIV2" style="float:left; width:100px; height: 50px; background-color:red; clear:right;">clear:right float:left;</div>
</div>
示意圖：
這條補充規則，IE 中沒有很好的貫徹6，您可以自行驗證。
注:
- 關於塊格式化上下文，見：W3Help - KB010: 常規流( Normal flow ) 相關部分。
- 關於包含塊，請見： W3Help - KB008: 包含塊( Containing block )
- 關於外邊界，請見： W3Help - KB006: CSS 框模型( Box module )
- 關於此兼容性問題，請見： W3Help - RB8004: IE6 IE7 IE8(Q) 中浮動元素和絕對定位元素某些情況下會影響普通流中毗鄰 'margin' 的摺疊
- 關於此兼容性問題，請見： W3Help - RM8005: IE6 IE7 IE8(Q) 中行內元素後相鄰的浮動元素在某些情況下會折行放置在之前行內元素所在行框的底部
- 關於此兼容性問題，請見： W3Help - RM8008: IE6 IE7 IE8(Q) 中對浮動元素上 'clear' 特性的解釋出現錯誤，使其自身位置和其後浮動元素的位置與其他瀏覽器中不同
控制緊接浮動的排列 - 'clear' 特性
'clear' 特性是對浮動框和常規流中框的一種位置關係上的平衡。
| 值： | none | left | right | both | inherit |
| 初始值： | none |
| 適用於 | 塊級元素 |
| 可否繼承 | 否 |
| 計算值 | 同設定值 |
該特性表明一個元素框的哪一邊不可以和先前的浮動框相鄰。'clear' 特性不考慮它自身包含的浮動子元素和不處於同一個塊格式化上下文中的浮動元素。
對於插入框，該屬性適用於插入框所屬的最後的塊框。
間隙( Clearance )以元素頂外邊距上方空白的方式被引入。它用來把元素垂直（典型情況是向下）推過浮動框。它是一個值1。
'clear' 特性的值
- left | right | both：生成框的間隙，是指設置足夠的(空白區)， 以使元素的頂邊框邊界( top border edge )放置到由源文檔中較早元素生成的任何左浮動框(left)或右浮動框(right)或左右浮動框(both)的底外邊(bottom outer edge， 即底外邊界)之下。
- none：對考慮到浮動後的框的位置沒有約束。
可以簡單的認爲設置了 'clear' 特性值的元素，其 top border edge 要放在相關的浮動元素的bottom margin edge 之下。注意這兩種元素接觸邊界的區別。一個是 border，一個是 margin。
示例代碼：
<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red; margin-bottom:10px; "> float </div> <div style="clear:left; width:350px; height:50px; background-color:green; border:5px solid yellow; margin-top:50px;"> clearance </div>
示意圖：
這與外邊距摺疊無關，因爲浮動元素不與其他元素髮生外邊距摺疊2。
浮動元素上的 'clear' 特性
當 'clear' 特性被賦予浮動元素時，它將導致浮動框定位規則的修正，另外一條限制（第10條）被追加。
注：
- 關於此值的計算法則，請參見： W3C CSS2.1 - 9.5.2 Controlling flow next to floats: the 'clear' property
- 請見 W3Help - KB006: CSS 框模型( Box module ) 的外邊距摺疊部分。