一、浮動
CSS浮動 CSS float浮動的深入研究、詳解及拓展(一) CSS浮動屬性Float詳解
塊級元素獨占一行
塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。
可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1后邊，因為div元素是獨占一行的。
注意，以上這些理論，是指標准流中的div。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。
浮動
浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。
浮動框不屬於文檔中的普通流，當一個元素浮動之后，不會影響到塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是只能左右浮動。
顯然標准流已經無法滿足需求，這就要用到浮動。 浮動可以理解為讓某個div元素脫離標准流，漂浮在標准流之上，和標准流不是一個層次。
重要結論：
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標准流中的元素，那么A的相對垂直位置不會改變(因為標准流中的塊級元素是獨占一行的)，也就是說A的頂部總是和上一個元素的底部對齊。
可以看出：
元素浮動之前，也就是在標准流中，是豎向排列的，而浮動之后可以理解為橫向排列。
二、清除浮動（造成的影響）
清除浮動可以理解為打破橫向排列。
清除浮動其實就一個目的，就是解決高度塌陷的問題。
為什么會高度塌陷？什么時候會高度塌陷？塌陷原因是：元素含有浮動屬性 – 破壞inline box – 破壞line box高度 – 沒有高度 – 塌陷。
什么時候會塌陷：當標簽里面的元素沒有實際高度時會塌陷。
清除浮動：
3.1 添加額外標簽
浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，其他標簽br等亦可。
3.2 使用 br標簽和其自身的 html屬性
<br clear="all" />
3.3 父元素設置 overflow：hidden
通過設置父元素overflow值設置為hidden(在支持BFC的瀏覽器觸發BFC)；在IE6,IE7中還需要觸發 hasLayout ，例如 zoom：1
3.4 父元素設置 overflow：auto 屬性
父元素設置 overflow：auto 屬性(在支持BFC的瀏覽器觸發BFC) 同樣IE6,IE7需要觸發hasLayout，
3.5 父元素也設置浮動
3.6 父元素設置display:table
3.7 使用 :after 偽元素
清除浮動兩大類方法：
通過對比，我們不難發現，其實以上列舉的方法，無非有兩類：
其一，通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after偽元素其實也是通過 content 在元素的后面生成了內容為一個點的塊級元素；
其二，觸發BFC或haslayout：通過設置父元素 overflow 或者display：table 屬性來閉合浮動，我們來探討一下這里面的原理。（即觸發BFC或haslayout）
after偽元素 清除浮動重點講解
1 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } 2 .clearfix { *zoom:1; }
1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
2) height:0 避免生成內容破壞原有布局的高度。
3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點擊和交互;
4）通過 content:"."生成內容作為最后一個元素，至於content里面是點還是其他都是可以的，例如oocss里面就有經典的content:"XXXXXXXXX",有些版本可能content 里面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
5）zoom：1 觸發IE hasLayout。
通過分析發現，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什么會有font-size：0，line-height：0。
精益求精方案一：
1 .clearfix:after {content:"\200B"; display:block; height:0; clear:both; } 2 .clearfix { *zoom:1; /* IE6 IE7 觸發hasLayout*/}.
相對於空標簽閉合浮動的方法代碼似乎還是有些冗余，通過查詢發現Unicode字符里有一個“零寬度空格”，也就是U+200B ，這個字符本身是不可見的，所以我們完全可以省略掉 visibility:hidden了
精益求精方案二：
1 /* For modern browsers */ 2 .cf:before,.cf:after { 3 content:""; 4 display:table; 5 } 6 .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */ 7 .cf { zoom:1; }
上面的方法用到了 :before 偽元素，很多人對這個有些迷惑，到底我什么時候需要用 before 呢？為什么方案一沒有呢？其實它是用來處理 margin 邊距重疊的，由於內部元素 float 創建了BFC，導致內部元素的margin-top和 上一個盒子的 margin-bottom 發生疊加。如果這不是你所希望的，那么就可以加上 before，如果只是單純的閉合浮動，after 就夠了！