float: left|right; 可以自動排列自動折行, 但需要clear來配合清除浮動;
display: inline-block; 有些時候可以替代float實現相同的效果.
position: absolute|relative; 要配合top,left等定位;

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

float也會導致元素脫離文檔流，但還在文檔或容器中占據位置，把文檔流和其它float元素向左或向右擠，并可能導致?lián)Q行。圖片的文字環(huán)繞布局效果就是float。

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

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

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

不用解釋每個的概念，僅談應用上的區(qū)別。
應用范圍是？或者說在什么情況下優(yōu)先使用哪個？
盡管都能實現某一效果

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

position

position屬性取值：static(默認)、relative、absolute、fixed、inherit。

postision：static；始終處于文檔流給予的位置。看起來好像沒有用，但它可以快速取消定位，讓top，right，bottom，left的值失效。在切換的時候可以嘗試這個方法。

除了static值，在其他三個值的設置下，z-index才會起作用。（確切地說z-index只在定位元素上有效）

position：relative和 absolute都可以用于定位，區(qū)別在于前者的div還屬于正常的文檔流，后者已經是脫離了正常文檔流，不占據空間位置，不會將父類撐開。定位原點 relative是相對于它在正常流中的默認位置偏移，它原本占據的空間任然保留；absolute相對于第一個position屬性值不為static 的父類。所以設置了position：absolute，其父類的該屬性值要注意，而且overflow：hidden也不能亂設置，因為不屬于正常文檔 流，不會占據父類的高度，也就不會有滾動條。

fixed舊版本IE不支持，卻是很有用，定位原點相對于瀏覽器窗口，而且不能變。常用于header，footer，或者一些固定的懸浮div，隨滾動條滾動又穩(wěn)定又流暢，比JS好多了。fixed可以有很多創(chuàng)造性的布局和作用，兼容性是問題。

position：inherit。規(guī)定從父類繼承position屬性的值，所以這個屬性也是有繼承性的。但是任何版本的IE都不支持該屬性值。

float

float屬性取值：none(默認)、left、right、inherit。

float：left(或right)，向左（或右）浮動，直到它的邊緣碰到包含框或另一個浮動框為止。且脫離普通的文檔流，會被正常文檔流內的塊框忽略。不占據空間，無法將父類元素撐開。

任何元素都可以浮動，浮動元素會生成一個塊級框，不論它本身是何種元素。因此，沒有必要為浮動元素設置display：block。

如果浮動非替換元素，則要指定一個明確的width，否則它們會盡可能的窄。（什么叫替換元素？根據元素本身的特點定義的，?(X)HTML中的img、input、textarea、select、object都是替換元素，這些元素都沒有實際的內容。?(X)HTML 的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。）

????（（（不想脫離出去講清理浮動- -||，還是少說些。。。

最直接的clear屬性，該屬性表示的是框的 哪邊不應該挨著浮動框。這個屬性是對元素本身而言，通過自動為該元素增加上外邊距實現的（css1和css2），或者在上外邊距之上增加清除空間，而外邊 距本身不改變的方式（css2.1）。clear的缺陷是可能要添加額外無意義的標簽。

通過父類的浮動也可以清理子類浮動，將空間撐開。這有點像負負得正。但原理應該是浮動的元素也是按照文檔流的方式布局，只不過它們是另外一個獨立的文檔流，不同于普通文檔流，暫時叫它浮動文檔流？

hasLayout和BFC都可以清理浮動。overflow：hidden；zoom:1；）））

display

display屬性取值：none、inline、inline-block、block、table相關屬性值、inherit。

display屬性規(guī)定元素應該生成的框的類型。文檔內任何元素都是框，塊框或行內框。

display：none和visiability：hidden都可以隱藏div，區(qū)別有點像absolute和relative，前者不占據文檔的空間，后者還是占據文檔的位置。

display：inline和block，又叫行內元素和塊級元素。表現出來的區(qū)別就是block獨占一行，在瀏覽器中通常垂直布局，可以用margin來控制塊級元素之間的間距（存在margin合并的問題，只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。）；而inline以水平方式布局，垂直方向的margin和padding都是無效的，大小跟內容一樣，且無法設置寬高。inline就像塑料袋，內容怎么樣，就長得怎么樣；block就像盒子，有固定的寬和高。

inline-block就介于兩者之間。

table相關的屬性值可以用來垂直居中，效果一般。

定位機制

上面三個屬性都屬于CSS定位屬性。CSS三種基本的定位機制：絕對定位、浮動、普通流。

?????隨便扯一些居中布局：

寬高固定可以利用負 margin。.center{top：50%;margin-top:-height/2;left:50%;margin-left:-width /2;}話說現在覺得這個方法略微扯淡，要是寬高都知道，直接計算出x的值，設置個margin：x;就好了，多這么多代碼，沒勁。所以別盡看網上的代 碼，能簡則簡，本來就沒有模式。

寬高不固定的元素。.center{display：inline-block},父類設置{text-align:center}

垂直居中table-cell不說了

{line-height：height;vertical-align:middle;}

{position:absolute;top:0;bottom:0;margin:auto}別忘記給父類定位{position:relative;}

?

positon 與 display 的相互關系???

???元素分為內聯(lián)元素和區(qū)塊元素兩類（當然也有其它的），在內聯(lián)元素中有個非常重要的常識，即內兩元素是不可以設置區(qū)塊元素所具有的樣式，例如:width | height。

relative : 原來是什么類型的依舊是什么類型。?

absolute | fixed ： 元素就被重置為了區(qū)塊元素，例如：打算為span元素指定大小，并絕對定位?

????<span style=”position:absolute; width:100px; height:50px;”>span</span>這是完全正確的，?

????<span style=”position:absolute; display:block; width:100px; height:100px;”>span</span>，這里的display:block就是多余的了。

?

position 與 float 的相互關系

???一個元素若設置了?position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流(這是自己起的名字，呵呵)”。

但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

position: relative和position: absolute 都可以改變元素在文檔中的位置，設置position: relative 或 position: absolute都可以讓元素激活left、top、right、bottom 和 z-index 屬性。

網頁雖然看起來是平面的二維結構，但它其實是有z軸的，z軸的大小由z-index 控制，默認情況下，所有元素都是在z-index: 0 這一層的，這就是文檔流。設置position: relative 或 position: absolute會讓元素浮起來（就像游戲中的概念-多層圖層），也就是z-index大于0，它會改變正常情況下的文檔流。不同的是position: relative 會保留自己在z-index:0 層的位置，但是它的實際位置可能因為設置了left、top、right、bottom值而偏離原來在文檔流中的位 置，但對其他仍然在z-index:0層的元素位置不會造成影響。而position: absolute會完全脫離文檔流，不再在z-index:0層保留占位符，其left、top、right、bottom 值是相對于自己最近的一個位置–設置了position: relative 或 position: absolute的祖先元素的，如果祖先元素都沒有設置position: relative 或 position: absolute，那么就相對于body元素。

除了position: relative 和 position: absolute，float也能改變文檔流，不同的是，float屬性不會讓元素“上浮”到另一個z-index層，它仍然讓元素在z-index:0 層排列，float不像position: relative 和 position: absolute那樣，它不能通過left、top、right、bottom屬性精確地控制元素的坐標，它只能通過float:left 和 float:right 來控制元素在同層里“左浮”和“右浮”。float會改變正常的文檔流排列，影響到周圍元素。

另一個有趣的現象是position: absolute 和 float會隱式地改變display類型，不論之前什么類型的元素（display:none除外），只要設置了position: absolute 或 float中任意一個，都會讓元素以display:inline-block的方式顯示：可以設置長寬，默認寬度并不占滿父元素。就算我們顯式地設置 display:inline或者display:block，也仍然無效（float在IE6 下的雙倍邊距bug就是利用添加display:inline來解決的）。值得注意的是，position: relative卻不改變display的類型。

1、position?對?float?的影響：float?可以說是定義同輩元素之間的位置關系，浮動元素相對于父元素，其位置的定義是確定不變的的：基于position:static/relative時的位置，向左側或右側靠近(一個可能的錯誤的認識是，浮動元素會向左上角或右上角浮動)，
因此，position:static?和?position:relative?與?float?的效果可以疊加，?
但?position:absolute、position:fixed?這兩個定位屬性依賴于自身元素之外的參照，將使?float?的效果無法表現出來。

?

2、浮動元素對文本的影響：浮動概念的基礎是圖文混排，因此同輩元素的在排版時如果浮動元素與非浮動元素之間發(fā)生覆蓋，無論是誰覆蓋誰，非浮動的元素內的文字將會被擠走，如下例：

.elm{?width:100px;?height:50px;background:green;?border:1px?solid?red;???}
.lf{float:left;?}

?

float
no?float，被擠走?

?

3、浮動元素對父元素的影響：浮動元素的父元素丟失?block?高度，即使定義了高度，也無法影響其同輩浮動元素及其浮動的子元素的布局，默認情況下，如果父元素沒有定義高度，則父元素的內容會撐開父元素，達到自適應?block?高度的效果，浮動元素無法撐開其父元素的block?高度。

?

4、浮動元素對自身的影響：浮動元素將按?inline-block?形式布局（haslayout），即使將他設置為?display:inline;，因此，默認寬度自動擴展為100%的元素浮動之后，寬度由元素內容撐大，原來沒有高寬屬性的元素也變得可以定義高寬；如果出現重疊，浮動元素將疊加在非浮動的同輩元素之上（像是具有更大的z-index值）；

?

5、display, position, float 之間的相互關系： 1. 如果display等于none，則用戶端必須忽略position和float。在這種情況下，元素不產生盒子。 2. 否則，如果position等于absolute，則display與float皆強制為none(list-item保持不變)。盒子的位置由邊界偏移量確定。 3. 否則，如果float不等于none或該元素是根元素，則display強制為block(list-item保持不變)。 4. 否則，使用指定的display屬性。 1、絕對定位完全脫離普通流，因此絕對定位元素無法跟普通流搭建交互關系（普通流能影響絕對定位，絕對定位不影響普通流），這樣來說，在一些自適應布局場 景中，絕對定位就存在一些缺陷（需要更多的限制因素，非常不靈活）。如果希望用絕對定位實現你說的 float 或 inline-block 同樣的效果，這個時候一般是不推薦用 絕對定位。
2、對于浮動，這個屬性一般不是用來做布局的（偏向于排版），但是CSS2.1好像也就這個屬性 能夠滿足一些特定需求，所有才有了浮動布局。浮動相對絕對定位好處是，它默認可以影響行內布局，通過 clear 清除浮動也可以影響 塊布局，可以與普通流建立良好的交互。 而且浮動本身是脫離普通流的，在元素的水平定位上相比于 inline-block 更加靈活多變， 而 inline-block 的水平定位則更加有序。
3、inline-block，這個屬性也不是用來布局的（偏向于排版），但是在 CSS3 普及之前，它的用處也很大。該元素的盒子在行框中進行格式化，其順序與源HTML中的順序一一對應。 同時該元素不脫離普通流，這比浮動來說有更大的優(yōu)勢，它可以跟普通流自然交互，而不必要借助去其他屬性。而且相比浮動，相鄰元素間的垂直對齊方 式，inline-block 比 float 更加靈活， float 格式化時有一條規(guī)則，就是越高越好（因此常常表現為頂端對齊），而 inline-block 在行內格式化，擁有更靈活的垂直對齊方式。應用：
如果使用了浮動，清除浮動就會成為你的副作用，而且如果你沒有良好的HTML/CSS 結構的話，清除浮動是一個很復雜的事情。
inline-block 雖然避免了清除浮動的事情，但是會有另一個副作用，即空白符問題。這個問題的解決方案也令人十分蛋疼，因為畢竟 inline-block 不是布局屬性，它僅僅是 行內級塊容器盒子。 同時，作為IFC環(huán)境中的格式化問題，垂直居中、行高等問題也有可能是一個副作用。 其他：
其實在 CSS2.1中，利用表格 table 布局也是非常強大的方法。表格布局在等高，同列等寬對齊，垂直居中對齊上面的優(yōu)勢是其他方法很難媲美的。甚至于在自適應場景中，表格布局的靈活性也非常出眾。 float: left|right; 可以自動排列自動折行, 但需要clear來配合清除浮動;
display: inline-block; 有些時候可以替代float實現相同的效果.
position: absolute|relative; 要配合top,left等定位;舉例:
<html>
<body>
<style type=”text/css”>
div {border: 1px solid red; margin: 1px;}
div div {border: 1px solid blue;}
</style>
<div>
<div style=”float: right;”>Float 1</div>
<div style=”float: right;”>Float 2</div>
<div style=”clear: both; border: 0;”></div>
</div>
<div style=”text-align: right;”>
<div style=”display: inline-block;”>Inline Block 1</div>
<div style=”display: inline-block;”>Inline Block 2</div>
</div>
<div style=”position: relative;”>
<div style=”position: absolute; right: 0px;”>Position 1</div>
<div style=”position: absolute; right: 50px;”>Position 2</div>
</div>
</body>
</html>表現:

上面的是float, 中間的是inline-block, 下面的是position, 可以看出:
1. 當居右(右浮動)時, float是按先后順序來的, 先寫的排子右邊; 而inline-block則保持左右順序不變.
2. 在部分瀏覽器中(以上是在的firefox中), 空行或空格會影響到inline-block, 卻不會影響到float的block.
3. position只能配合left,right來定位, 如果去掉則重疊在一起; 不能借助clear等自動擴展容器.
4. 他們都有共同點, 如果包裹的是行級元素, 則寬度可以按內容寬度自適應.

?

使用場景:
照片墻, 選項卡, 導航條等可以使用inline-block或float, 推薦inline-block, 但需要注意瀏覽器兼容, 用float記得習慣性的使用clear.
Tip等提示, 懸浮窗, 遮罩等, 建議使用position.

轉載于:https://www.cnblogs.com/eaysun/p/4052079.html

總結

以上是生活随笔為你收集整理的CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。