先看看w3c關於浮動float和絕對定位absolute的講解：
float：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
absolute：設置為絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
對於浮動float來說，它僅僅是浮動框脫離標准流，並不是去安全的脫離標准流，而絕對定位absolute是將元素框完全的脫離標准流從文檔流中刪除：
看看以下的例子：
絕對定位absolute
#div1 { background:#666; position: absolute; top: 0px; left: 0px; /*float:left;*/ width:100px; height:100px; } #div2 { background:#093; width:200px; height:200px; } #div3 { background:#363; width:100px; height:100px; } </style> <body> <div id="div1"> 1111111 <p>1111111</p> <p>1111111</p> </div> <div id="div2"> <p>2222222</p> <p>2222222</p> <p>2222222</p> </div> <div id="div3"> <p>3333333</p> <p>3333333</p> <p>3333333</p> </div>
浮動float：
#div1 { background:#666; /*position: absolute; top: 0px; left: 0px;*/ float:left; width:100px; height:100px; } #div2 { background:#093; width:200px; height:200px; } #div3 { background:#363; width:100px; height:100px; } </style> <body> <div id="div1"> 1111111 <p>1111111</p> <p>1111111</p> </div> <div id="div2"> <p>2222222</p> <p>2222222</p> <p>2222222</p> </div> <div id="div3"> <p>3333333</p> <p>3333333</p> <p>3333333</p> </div>
對於浮動float它並沒有把div2里面的內容222222遮住而絕對定位absolute把div2的內容覆蓋，所以我們在使用浮動和絕對定位的時候需要注意到，雖然在有些情況下float和absolute都能達到效果，但是他們的區別我們不能忽視
jsFiddle：絕對定位absolute、浮動float