文檔流
css中的塊級元素在頁面中是獨占一行的，自上而下排列，也就是我們所說的流，通常我們稱之為文檔流或標准流。
1 <html>
2 <head>
3 <style>
4 div {width:100px;height:100px;}
5 </style>
6 </head>
7 <body style="background-color: eee">
8 <div style="background-color:red">div1</div>
9 <div style="background-color:green">div2</div>
10 <div style="background-color:blue">div3</div>
11 </body>
12 </html>
浮動
使元素脫離文檔流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。起初，W3C規定出來的浮動實際並不是為了布局所用，當時是為了做文字環繞才使用到浮動，后來有人用它來做布局，發現不錯而一炮走紅。
float：left； 左浮動
float：right；右浮動
1 <html>
2 <head>
3 <style>
4 div {width:100px;height:100px;}
5 </style>
6 </head>
7 <body style="background-color: eee">
8 <div style="background-color:red;float:left">div1</div>
9 <div style="background-color:green;float:right">div2</div>
10 <div style="background-color:blue;float:left">div3</div>
11 </body>
12 </html>
脫離標准流
如果這時有不浮動的元素，會被浮動的元素蓋住，因為浮動的元素已經脫離了標准流，浮動的元素已經和標准流不在同一層次上了。下圖中綠色div就被紅色div蓋住了。
1 <html>
2 <head>
3 <style>
4 div {width:100px;height:100px;}
5 </style>
6 </head>
7 <body style="background-color: eee">
8 <div style="background-color:red;float:left">div1</div>
9 <div style="background-color:green">div2</div>
10 <div style="background-color:blue">div3</div>
11 </body>
12 </html>
無法擺脫標准流
浮動能夠脫離標准流，但又不能擺脫標准流，這時css中最繞的一個知識點。第一個div如果不浮動，那么就會占據標准流中的位置，即使下邊的元素什么狀態，都不能覆蓋上來，只能在之下的空間玩耍。也就是說，垂直的元素，上邊元素浮動下邊元素為標准流，則上邊元素可覆蓋下邊元素，反之，不可。
1 <html>
2 <head>
3 <style>
4 div {width:100px;height:100px;}
5 </style>
6 </head>
7 <body style="background-color: eee">
8 <div style="background-color:red;">div1</div>
9 <div style="background-color:green;float:left;">div2</div>
10 <div style="background-color:blue;float:left;">div3</div>
11 </body>
12 </html>
1 <html>
2 <head>
3 <style>
4 div {width:100px;height:100px;}
5 </style>
6 </head>
7 <body style="background-color: eee">
8 <div style="background-color:red;">div1</div>
9 <div style="background-color:green;float:right;">div2</div>
10 <div style="background-color:blue;float:right;">div3</div>
11 </body>
12 </html>
清除浮動場景1：元素遮蓋-clear:both
通過上邊的例子，我們知道，如果上邊的元素浮動，下邊的元素就會頂上去。但很多時候，我們希望把幾個元素浮動成一行后，下邊的元素不被浮動的元素覆蓋，這就需要清除浮動了。
調整前：藍色元素被浮動元素蓋住了
1 <html>
2 <head>
3 <style>
4 div {width:100px;height:100px;}
5 .clearfix {clear: both;}
6 </style>
7 </head>
8 <body style="background-color: eee">
9 <div style="background-color:red;float:left;">div1</div>
10 <div style="background-color:green;float:left;">div2</div>
11 <div style="background-color:blue;">div3</div>
12 </body>
13 </html>
調整后：藍色元素顯示出來了
1 <html>
2 <head>
3 <style>
4 div {width:100px;height:100px;}
5 .clearfix {clear: both;}
6 </style>
7 </head>
8 <body style="background-color: eee">
9 <div style="background-color:red;float:left;">div1</div>
10 <div style="background-color:green;float:left;">div2</div>
11 <div style="background-color:blue;" class="clearfix">div3</div>
12 </body>
13 </html>
清除浮動場景2：高度塌陷-overflow-auto
當有div嵌套時，子div如果浮動，那么父div就會成為無內容的元素。
調整前：父元素的內容為空，顯示不出東西
1 <html>
2 <head>
3 <style>
4 .small {width:100px;height:100px;}
5 .big {width:200px;height:200px;}
6 .clearfix {clear: both;}
7 </style>
8 </head>
9 <body style="background-color: eee;">
10 <div style="background-color:red;">
11 <div style="background-color:green;float:left" class="small">div1</div>
12 <div style="background-color:blue;float:left" class="small">div2</div>
13 </div>
14 </body>
15 </html>
調整后：外邊包裹div的背景色能夠顯示出來
1 <html>
2 <head>
3 <style>
4 .small {width:100px;height:100px;}
5 .big {width:200px;height:200px;}
6 .clearfix {overflow:auto;}
7 </style>
8 </head>
9 <body style="background-color: eee;">
10 <div style="background-color:red;" class="clearfix">
11 <div style="background-color:green;float:left" class="small">div1</div>
12 <div style="background-color:blue;float:left" class="small">div2</div>
13 </div>
14 </body>
15 </html>
在父元素上設置overflow這個屬性，如果父元素的這個屬性設置為auto或者是hidden，父元素就會擴展包含浮動，這個方法有着比較好的語義性，因為它不需要額外的元素，但是，要記住一點，overflow屬性不是為了清除浮動而定義的，要小心不要覆蓋住內容或者觸發了不需要的滾動條。
bootstrap中的clearfix
由上邊可以看出，其實清除浮動有兩種場景，那么就應該寫一個通用的css。開源的項目就是方便，好多前人留下了日常用到的工具類，下面是bootstrap中的清除浮動。
1 .clearfix{*zoom:1} /* IE/7/6*/
2 .clearfix:before,.clearfix:after{display:table;line-height:0;content:""}
3 .clearfix:after{clear:both}