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

問題描述

問題解答

個人來看

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 布局也是非常強大的方法。表格布局在同行等高，同列等寬，垂直居中對齊上面的優勢是其他方法很難媲美的。甚至于在自適應場景中，表格布局的靈活性也非常出眾。