浮動float：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。(W3C)
絕對定位absolute:
設置為絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。(W3C)
以上是W3C里對浮動和絕對定位的解釋。
乍一看貌似兩者沒有什么關系，不過仔細想想，兩者又有很多的相似之處。比如兩者都從文檔流中獨立出來，並且元素在文檔流中的原有空間都會被關閉。
我們可以用兩者達成同一個目的。
首先寫一個坯子：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>inline、block、inline-block的區別</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 #box { 12 width: 500px; 13 margin: 100px auto 0 auto; 14 border: 1px solid red; 15 } 16 17 #a, #b, #c,#d { 18 width: 100px; 19 height: 100px; 20 margin: 2px; 21 } 22 #a { 23 background: #ccc; 24 } 25 #b { 26 background: #666; 27 } 28 #c { 29 background: blue; 30 } 31 #d { 32 background: green; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="box" class="clearfix"> 38 <div id="a"></div> 39 <div id="b"></div> 40 <div id="c"></div> 41 <div id="d"></div> 42 </div> 43 </body> 44 </html>
效果：
現在我們給a塊做向左浮動：
1 #a { 2 background: #ccc; 3 float: left; 4 }
我們看到a塊向左浮動，文檔流中失去了空間，之后的b、c、d逐次補上。
如果給a塊設置絕對定位又是什么情況呢？
1 #a { 2 background: #ccc; 3 position: absolute; 4 }
我們發現效果是一樣的。
不過如果a塊后面有一段文字呢？
1 <body> 2 <div id="box" class="clearfix"> 3 <div id="a"></div> 4 <span>SD卡收到貨我ID號為活動文化低哦按活動ihawoidh</span> 5 <div id="b"></div> 6 <div id="c"></div> 7 <div id="d"></div> 8 </div> 9 </body>
浮動float：
絕對定位absolute:
這么看差別就出來了，絕對定位獨立於整個模型中，沒有影響到文檔流中的元素，而浮動則影響到了其之后的文檔流。
接下來，我們給a、b、c、d全部都浮動或者絕對定位：
浮動float：
絕對定位absolute:
這樣也看出區別了，元素進行浮動后，會按照浮動流的先后順序進行排列，而絕對定位則是每一個元素都獨立存在於其他所以元素。
現在，我們想把a、b、c、d的父元素box框給撐起來，其實也就是其父元素自適應高度，則浮動可以用clear屬性：
我們可以在d塊后面加一個
1 <div style="clear: both"></div>
或者有更好的方法：
1 .clearfix:after { 2 content: '.'; 3 display: block; 4 height: 0; 5 clear: both; 6 visibility: hidden; 7 }
這種方法是用":after"偽元素在元素的內容之后插入了一個塊級元素(display: block)。將其屬性設置"clear：both"從而達到與前者同樣的效果。
至於上面兩種方法的取舍，建議使用下一種，因為下面一種不用在html代碼里添加額外的div塊代碼，不會對html的結構造成影響。
如果我們要讓進行絕對定位的父元素邊框自適應該怎么辦？clear只能應用在清除浮動的操作中，對進行絕對定位的元素塊是不起作用的。所以我們只能通過計算給父元素框設置高度，這樣才能達到這樣的效果。
如果我們需要達到這樣的效果：
頁面四角固定有四個元素塊，頁面中央有一個固定長寬的元素塊居中，並且當我們調整頁面的大小時，這些元素塊相對於頁面的位置不發生改變。
有2種方法可以達到這樣的效果：
第一種： 浮動+定位：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>float和absolute</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #a, #b, #c,#d { 13 width: 100px; 14 height: 100px; 15 margin: 2px; 16 background: #666; 17 } 18 #a { 19 float: left; 20 } 21 #b { 22 float: right; 23 } 24 #c { 25 float: left; 26 position: absolute; 27 left: 0; 28 bottom: 0; 29 } 30 #d { 31 float: right; 32 position: absolute; 33 right: 0; 34 bottom: 0; 35 } 36 #content { 37 width: 400px; 38 height: 300px; 39 background: red; 40 position: absolute; 41 left: 50%; 42 top: 50%; 43 margin-left: -200px; 44 margin-top: -150px; 45 } 46 </style> 47 </head> 48 <body> 49 <div id="a"></div> 50 <div id="b"></div> 51 <div id="c"></div> 52 <div id="d"></div> 53 <div id="content"></div> 54 </body> 55 </html>
第二種：絕對定位 ：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>float和absolute</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #a, #b, #c,#d { 13 width: 100px; 14 height: 100px; 15 margin: 2px; 16 background: #666; 17 } 18 #a { 19 position: absolute; 20 top: 0; 21 left: 0; 22 } 23 #b { 24 position: absolute; 25 top: 0; 26 right: 0; 27 } 28 #c { 29 position: absolute; 30 left: 0; 31 bottom: 0; 32 } 33 #d { 34 position: absolute; 35 right: 0; 36 bottom: 0; 37 } 38 #content { 39 width: 400px; 40 height: 300px; 41 background: red; 42 position: absolute; 43 left: 50%; 44 top: 50%; 45 margin-left: -200px; 46 margin-top: -150px; 47 } 48 </style> 49 </head> 50 <body> 51 <div id="a"></div> 52 <div id="b"></div> 53 <div id="c"></div> 54 <div id="d"></div> 55 <div id="content"></div> 56 </body> 57 58 </html>
仔細觀察發現其實第一種方法完全有點畫蛇添足的意思，將四個元素浮動再定位還不如開始就定位來得直接。而且如果用了浮動實現，還會發生很多意外的情況。
比如在box內容的最上端添加一個高度為100px寬度為400px並居中的長框。
浮動float：
絕對定位absolute：
我們發現后期往html結構里添加內容時，只有絕對定位的布局沒有受到影響，這恰恰是我們所需要達到的效果。
所以在日常的選擇中，固定分布的布局盡量使用定位(relative/absolute)，而浮動則在導航條等橫式布局中運用得多一些。