CSS元素定位--浮動（float）與清楚（clear）

CSS中定位的基本思想：

定義元素框相對於其正常位置應該出現在哪裡，或者相對於父元素，又或者是相對於另一個元素，甚至相對於瀏覽器視窗本身的位置。 浮動 ( float )：

   CSS中允許對所有元素進行浮動，這種行為使用屬性 float 實現。float可選值：left | right | none | inherit

浮動元素：

對於浮動元素有幾點需要記住：

聲明為浮動的元素會被以某種方式從文檔的正常流中刪除，不過它們依然會影響布局。這種影響的一個具體表現為：一個元素浮動時，其他內容會“環繞”該浮動元素。

如果要確定要浮動一個非替換元素，則必須為該元素宣告一個 width 屬性。否則，根據CSS規範，該元素的寬度趨於 0 。假設瀏覽器的最小 width 為 1個字元，那麼沒有聲明 width 屬性的非替換浮動元素可能只有 1 個字元寬。

浮動元素的外邊距(margin)絕對不會與其他浮動元素的外邊距重疊。

如果要確保一個元素不浮動，最好顯示的聲明該元素的 float 屬性值為：none 。雖然所有元素的 float 屬性的預設值為none，但是，在瀏覽器實現中，如果沒有顯示的制定這個 none 值，所有元素都會以某種方式浮動。 浮動的詳細理解 浮動元素的包含塊(Containning Block)

浮動元素的包含塊是其最近的塊級祖先元素。

浮動元素會產生一個塊級框，而不論這個元素本身是什麼（例如，正常情況下 span 屬於行內元素display： inline） 浮動元素的擺放規則 浮動元素的左（或右）外邊界不能超出其包含塊的左（或右）內邊界。(注意：沒有包含上下邊界哦~~。。!) 浮動元素的左（或右）外邊界必須是來源文件中之前出現的浮動左浮動（或右浮動）元素的右（或左）外邊界，即是：所有浮動元素也是按‘隊列’形式排列的），除非後出現的浮動元素的頂端在先出現的浮動元素的底端下面。這條規則可以防止浮動元素彼此“覆蓋”，確保所有浮動元素都是可見的。 一個左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的左邊。（這個規則讀起來相當拗口-_-，理解起來也是相當吃力的，需要對CSS的盒式模型有較為深入的理解），不理解這條規則也無所謂啦，只需要記住：這條規則最終的用處在於防止浮動元素間相互重疊。如果你想要深究，可以參見我的筆記：CSS盒式模型。這裡舉個栗子協助大家快速理解一下：假設我們現在有一個 600 * 600 的 div， 讓後它包含了兩個 400 * 400 的浮動元素，一個浮動到左邊，一個浮動到右邊， 400 + 400 大於 600 ,這個時候為了防止兩者間發生 100 個像素的重疊，瀏覽器將會按這條規則要求的，將第二個浮動div（右浮動的那個）向下浮動，直到其頂端在左浮動div的底端之下。 示範如下：

<div style="width:600px; height: 600px; background-color:darkred">
<div style="width:400px; height: 400px; background-color:yellow; float: left;"></div>
<div style="width:400px; height: 400px; background-color:bule; float: right;"></div>
</div>
一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合并外邊距元素之間，放置這個浮動元素時就好像在兩個元素之間有一個區塊層級元素。這條規則後半部分同樣讓人一下子理解不來，還是舉個栗子吧：現在有一個div，其中包含了三個段落（

），其中中間的段落設定為浮動。在這種情況下，為了防止段落浮動到三個段落共同的父元素div的頂端，就需要這條規則來限定啦。這時，上下兩個段落間就會表現出區塊層級元素的特性，以便中間的段落進行浮動。 浮動元素的頂端不能比之前所有浮動元素或區塊層級元素的頂端更高。（類似於上一條規則）不過這條規則更直觀的用處在於：1 和 2 的寬度總和大於了三個div的共同父級塊元素的寬度，且div1和div2都是left浮動，所以，div2 自動換行到div1的下面，這一規則在前面以前給出了，本條規則的直觀表現在於，div3 它的頂端並沒有超過div2的頂端，即使 div1 的右邊依然有足夠的空餘空間，這條規則結合第二條規則就很容易理解這樣的布局出現的原理了。

<div style="width:180px; height: 220px; background-color:blue">
<div style="width:80px; height:40px; float:left; background-color:rgb(98, 205, 468)"> </div>
<div style="width:120px; height:40px; float:left; background-color:rgb(100, 80 , 205)"> </div>
<div style="width:40px; height:40px; float:right; background-color:yellow"> </div>
</div>

如果來源文件中一個浮動元素之前出現了另一個元素，浮動元素的頂端不能比包含該浮動元素（的包含塊）所產生框的任何行框的頂端高。舉個栗子來理解記憶：假設一個段落的正中間有一個浮動映像，由於這條規則的限制。這個映像頂端最高只能放在該映像所在行框的頂端。 左（或右）浮動元素的左邊（或右邊）右另一個浮動元素時，前者的右外邊界不能在其包含塊的右（左）邊界的右邊（左邊）。也即是：浮動元素不能超出其包含元素的邊界，除非它真的很寬，本身都無法放下（例如：一個400 * 400 的父級塊元素包含了一個 600 * 600 的浮動元素）。上上條規則的樣本中 1 和 2 就是本規則的示範。 浮動元素必須儘可能高的放置。當然必須要儘可能高的前提是滿足上面的所有規則。 實際應用

在大部分瀏覽器，當浮動元素的高度超過包含元素的高度時，其顯示會向下超出包含元素。一些舊時代的瀏覽器可能會採用增加包含元素高度的方案來解決這個問題。同樣的左右邊界也是一樣的處理方案，chorme40+中親測通過。
當外邊距的值為負數時，可能會導致浮動元素移動到父元素的外面。看起來就像違反了前面的排放規則一樣。這號的理解就是用筆計算一下，這個需要理解一下CSS的盒式模型。
如果一個浮動元素和正常流中的內容發生重疊會發生什麼情況呢。
針對此問題，CSS2.1規範中給出了明確的解釋：

行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素’之上’顯示

塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素’之下’顯示，內容在浮動元素’之上’顯示 清楚浮動（clear）

利用clear屬性，我們可以確保元素指定的方位旁不會出現浮動元素。
直接上栗子：
我們希望p元素不會放在做浮動的元素的右邊，那麼我們可以這樣聲明p{clear : left}。也可以這樣理解：p元素的左邊不能出現浮動元素。