什么是浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
我們來看幾個例子
-
請看下圖：當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣
-
請看下圖： 當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
-
請看下圖：如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”
實現浮動
在 CSS 中，我們通過 float 屬性實現元素的浮動。float 屬性定義元素在哪個方向浮動。其可能值有：
- left 元素向左浮動
- right 元素向右浮動
- none 默認值，元素不浮動
- inherit 規定從父元素繼承float屬性的值。
清除浮動
我們先來了解一下CSS標準文檔流，說白了就是一個“默認”狀態。元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。
但是我們在布局的時候，由于某些原因（當使用浮動、絕對定位、固定定位）會使文檔脫離標準流，其中浮動會影響標準流的排列。
我們浮動的目的，就是可以把多個塊級元素放到想要的一行上。
清除浮動的原因：因為浮動會影響標準流，比如浮動造成的父級高度塌陷問題
清除浮動的方法
1、使用偽元素來清除浮動(:after,注意：作用于浮動元素的父親）
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE專有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多，不少初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持
建議：推薦使用，建議定義公共類，以減少CSS代碼
.clearfix:after{
content:""; /*設置內容為空*/
height:0; /*高度為0*/
line-height:0; /*行高為0*/
display:block; /*將文本轉為塊級元素*/
visibility:hidden; /*將元素隱藏*/
clear:both; /*清除浮動*/
}
.clearfix{
zoom:1; /*為了兼容IE*/
}
2、添加新的元素對其應用 clear:both
原理：添加一個空元素，利用css提供的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空頁面標簽，造成結構的混亂。
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
//對添加的元素使用 clear:both
.clear{clear:both;}
<div class="box">
<div class="red" style="float:left;">1</div>
<div class="sienna" style="float:left;">2</div>
<div class="blue" style="float:left;">3</div>
//添加一個新元素
<div class="clear"></div>
</div>
3、父級div定義overflow:hidden
- 原理：使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
- 優點：簡單，代碼少，瀏覽器支持好
- 缺點：不能和position配合使用，因為超出的尺寸的會被隱藏
- 建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用
.over-flow{ overflow:hidden; zoom: 1;}/*zoom1; 是在處理兼容性問題*/
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
4、父級div定義overflow:auto
- 原理：使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
- 優點：簡單，代碼少，瀏覽器支持好
- 缺點：內部寬高超過父級div時，會出現滾動條。
- 建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
.over-flow{ overflow:auto; zoom: 1;}/*zoom1; 是在處理兼容性問題*/
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
5、父級定義高度height
只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題不推薦使用，只建議高度固定的布局時使用。
6、父級display設置成table
原理是將div屬性變成表格，可能會產生新的未知問題，不推薦使用，只作了解。
