浮動
關鍵字：float。可接受：left、right、none（默認值）。適用於所有元素。無繼承性。
<img src="b4.gif" style="float:left;alt="b4"" >
一個元素浮動時，其他元素會“圍繞”該元素。
浮動元素不會與周圍元素髮生外邊距合併。
如果要浮動一個非替換元素，則必須要爲其聲明一個width。
讓一個元素浮動，它會像塊級元素一樣擺放和表現，但本質不變。
幾點規則：
1、浮動元素的左（右）外邊界不能超出其包含塊的左（右）內邊界。
帶圓圈的數字表示標記元素在源文檔中的位置，帶方框的數字表示浮動元素的位置和大小。
2、浮動元素的左（右）外邊界必須是源文檔中之前出現的浮動元素的右（左）外邊界，除非後來的浮動元素頂端在之前浮動元素的底端下面。
3、左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊；右浮動元素的左外邊界不會在其左浮動元素的右外邊界的左邊。o(╯□╰)o
這條規則可以防止重疊。假設有一個body，寬度爲500px，它有兩個圖像，寬度都爲300px，一個浮動在左邊，一個浮動在右邊。則第二個圖像會被要求向下浮動，直到其頂端在左浮動元素底端之下。
4、一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合併外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素。
規則的前半部分可以防止浮動元素一直浮動到文檔的頂端。規則的後半部分是對某些情況下的對齊進行微調——假設有三個段落，讓中間的段落浮動，這時，浮動段落就會像有一個塊級父元素一樣浮動。這能防止浮動段落一直向上浮動到三個段落共同父元素的頂端。
5、浮動元素的頂端不能比之前所有浮動元素和塊級元素的頂端更高。
6、如果一個浮動元素之前出現另一個元素，則浮動元素的頂端不能比包含該元素生成框的任何行框的頂端更高。
這個規則進一步限制了元素的向上浮動。假設段落中間有一個浮動圖像，則該圖像的頂端最高只能放置在其所在行框的頂端。
7、左（右）浮動元素的左邊（右邊）有另外一個浮動元素，則前者的右（左）外邊界不能超出其包含塊的右（左）邊界的右（左）邊。
也就是說，浮動元素不能超出其包含塊的邊界。當多個浮動元素在同一行時，如果放不下，後來的元素會向下浮動到新的一行。
8、浮動元素必須儘可能高地放置。
9、左浮動元素必須向左儘可能遠，右浮動元素必須向右儘可能遠。位置越高，就會向左或向右浮動得越遠。
實用行爲
當浮動元素比父元素高時，會超出父元素的底端（之前的規則並沒有對底端進行限制）。例如：
CSS指出：浮動元素會延伸，從而包含其所有後代浮動元素。所以，通過將父元素設置爲浮動元素，就可以將浮動元素包含在其父元素內。
負外邊距可能導致浮動元素移到其父元素的外面。例如考慮一個向左浮動的圖像，它的左外邊距和上外邊距都是-15px，放在一個div中，div沒有內邊距、外邊距、邊框：
那麼問題就來了：使用負外邊距時，如果浮動元素超出其父元素，文檔會如何顯示？顯然，這取決於用戶代理，由其決定是否重新顯示文檔。
還有一種方法可以使浮動元素超出其父元素的左右內邊界，即浮動元素比父元素更寬。具體是向左超出還是向右超出，取決於浮動方式：
浮動元素、內容和重疊
考慮一個浮動元素與正常流中的內容發生重疊會如何顯示？
CSS規範明確指出：
1、行內框與一個浮動元素重疊時，其邊框、背景和內容都在浮動元素之上顯示；
2、塊框與一個浮動元素重疊時，其邊框、背景都在浮動元素之下顯示，而內容在其上顯示。
清除
關鍵字：clear。可接受：left、right、both、none。應用於塊級元素。無繼承性。例如：
h3{clear:left;}/*使h3的左邊沒有浮動元素*/
CSS2.1中引入了清除區域（clearance）。清除區域是在元素上外邊距之上增加的額外間隔，不允許任何浮動元素進入這個範圍內。如果希望清除元素的頂端和浮動元素的底端有一定距離，可以爲浮動元素設置一個下外邊距。因爲浮動元素的外邊距邊界定義了浮動框的邊界。