CSS 中，position：absolute、float、display：inline-block 都能實現相同效果，區別是什麼？

01-05

不用解釋每個的概念，僅談應用上的區別。
應用範圍是？或者說在什麼情況下優先使用哪個？
儘管都能實現某一效果

誠然，實現同一種效果的方法有很多，我不想回答太多技術性的東西（比如 KB010: 常規流( Normal flow )，自行補腦）。舉個生活中的栗子：比如早上從家到學校有三條路（對應問題中的三種方法），

如果你騎車可以走小路，路程短。
如果下雨了，你要坐公交又是另外一條路。
再者，只有第三條路有早點賣，如果你沒吃早餐，可以走這條路。

回到問題：

float 直接快速，如同你騎車抄近道，但是不可避免有時候會下雨，比如浮動帶來的父元素高度塌陷。
inline-block 似乎很好，可是公交車有時候會很堵的，該屬性帶來的空隙問題曾經令我糾結很久（去除空隙的兼容性解決方案我總結的在這裡：inline-block 前世今生）。
絕對定位我就不說了。

OK，不用糾結上面的栗子了，舉個實際的栗子吧：

有時候 inline-block 可以做到的，float 未必可以做到。

如果想要實現如下布局：

使用 float 則會變成這樣(Demo：inline-block 與 float 差異對比)：

inline-block 則可以做到（Demo：inline-block 與 float 差異對比）

總之，實現某一種效果有很多路可以走，但是未必都是適合你的。CSS3 的進化為我們帶來了諸如 flex，grid 這些專用強大的布局屬性，如同現在有了幸福的校車，包接包送！噗……

對於@賀師俊老濕的理論，在這裡簡單理解就是：你得想好你的需求，是想抄近道還是想吃早餐亦或坐公交，這些就是設計濕的設計意圖，CSS 最終反映的就是設計意圖，而非「到達學校」這個最終效果（結果）。

2014.05.13 更新：

總結一下：

CSS2.1 之前,一直沒有一個專門的屬性來解決網頁布局問題,Float也好,position 也罷,都只是一種 Tricks.直到 Flexbox 的出現,非常方便的解決了網頁一維布局的問題,而CSS Grid 則能更好的解決二維布局的問題.

以上

position: absolute會導致元素脫離文檔流，被定位的元素等於在文檔中不佔據任何位置，在另一個層呈現，可以設置z-index。PS的圖層效果就是position: absolute。

float也會導致元素脫離文檔流，但還在文檔或容器中佔據位置，把文檔流和其它float元素向左或向右擠，並可能導致換行。圖片的文字環繞布局效果就是float。

inline-block不脫離文檔流，將block元素當作大型字元嵌入文檔流內，類似於img或者input默認效果。

===================================================

補充，其實這個答案完全沒有回答問題，因為提問者說：

不用解釋每個的概念，僅談應用上的區別。
應用範圍是？或者說在什麼情況下優先使用哪個？
儘管都能實現某一效果

但是我想回答的是，這三種方式產生的排版效果是截然不同的，只有充分理解了他們的排版效果，才能作出最好的決定。

個人來看

1、絕對定位完全脫離了普通流(flow，後面不再說明)，無法跟普通流建立交互關係（普通流能影響絕對定位，但絕對定位不影響普通流）。這樣來說，在彈性布局的場景中，絕對定位就存在缺陷。但也因為它完全脫離文檔流，定位絕對很擅長做層疊布局。另外，絕對定位對於元素位置的控制也是最為靈活的。

2、浮動，本身不是用來做布局的，而是做文字環繞效果。但是CSS2.1好像也就這個屬性能夠快速地滿足一些需求，因此才有了浮動布局。浮動相對絕對定位好處是，它可以影響IFC，也可以通過 clear 清除浮動影響塊級布局，可以與普通流建立良好的交互。而且浮動本身是脫離普通流的，在頂端對齊和右對齊上有特別的優勢。而 inline-block 的垂直對齊上有更多選擇。

3、inline-block，這個屬性也不是用來布局的（偏向於排版），但是在 CSS3 普及之前，它的用處也很大。該元素的盒子在行框中進行格式化，其順序與源HTML中的順序一一對應。同時該元素不脫離普通流，這比浮動來說有更大的優勢，它可以跟普通流產生自然交互，而不必要藉助去其他屬性。而且相比浮動，相鄰元素間的垂直對齊方式，inline-block 比 float 更加靈活， float 格式化時有一條規則，就是越高越好（因此常常表現為頂端對齊），而 inline-block 在行內格式化，擁有更靈活的垂直對齊方式。

應用：

如果使用了浮動，清除浮動就會成為你的副作用，而且如果你沒有良好的HTML/CSS 結構的話，清除浮動是一個很複雜的事情。

inline-block 雖然避免了清除浮動的事情，但是會有另一個副作用，即空白符問題。這個問題的解決方案也令人十分蛋疼，因為畢竟 inline-block 不是布局屬性，它僅僅是行內級塊容器盒子。同時，垂直居中、行高等問題也有可能是一個副作用。

其他：

其實在 CSS2.1中，利用表格 table 布局也是非常強大的方法。表格布局在同行等高，同列等寬，垂直居中對齊上面的優勢是其他方法很難媲美的。甚至於在自適應場景中，表格布局的靈活性也非常出眾。

看這個網站解釋的很清楚 Learn CSS Layout 或者看我的關於css的總結你需要了解的十點CSS

absolute在一個大張背景圖容器上鋪各種A的時候常用，兼容性優秀，代碼優雅，屢試不爽！

應不應該使用inline-block代替float

float: left|right; 可以自動排列自動折行, 但需要clear來配合清除浮動;

display: inline-block; 有些時候可以替代float實現相同的效果.

position: absolute|relative; 要配合top,left等定位;

舉例: