CSS定位布局display/float/position屬性之間的關係/區別和如何使用取值行為機制

標籤：style   http   io   os   ar   使用   for   strong   sp   

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

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

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

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

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

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

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

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

 

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

position

1. position屬性取值：static(預設)、relative、absolute、fixed、inherit。
2. postision：static；始終處於文檔流給予的位置。看起來好像沒有用，但它可以快速取消定位，讓top，right，bottom，left的值失效。在切換的時候可以嘗試這個方法。
3. 除了static值，在其他三個值的設定下，z-index才會起作用。（確切地說z-index只在定位元素上有效）
4. position：relative和 absolute都可以用於定位，區別在於前者的div還屬於正常的文檔流，後者已經是脫離了正常文檔流，不佔據空間位置，不會將父類撐開。定位原點 relative是相對於它在正常流中的預設位置位移，它原本佔據的空間任然保留；absolute相對於第一個position屬性值不為static 的父類。所以設定了position：absolute，其父類的該屬性值要注意，而且overflow：hidden也不能亂設定，因為不屬於正常文檔 流，不會佔據父類的高度，也就不會有捲軸。
5. fixed舊版本IE不支援，卻是很有用，定位原點相對於瀏覽器視窗，而且不能變。常用於header，footer，或者一些固定的懸浮div，隨捲軸滾動又穩定又流暢，比JS好多了。fixed可以有很多創造性的布局和作用，相容性是問題。
6. position：inherit。規定從父類繼承position屬性的值，所以這個屬性也是有繼承性的。但是任何版本的IE都不支援該屬性值。

float

1. float屬性取值：none(預設)、left、right、inherit。
2. float：left(或right)，向左（或右）浮動，直到它的邊緣碰到包含框或另一個浮動框為止。且脫離普通的文檔流，會被正常文檔流內的塊框忽略。不佔據空間，無法將父類元素撐開。
3. 任何元素都可以浮動，浮動元素會產生一個塊級框，不論它本身是何種元素。因此，沒有必要為浮動元素設定display：block。
4. 如果浮動非替換元素，則要指定一個明確的width，否則它們會儘可能的窄。（什麼叫替換元素？根據元素本身的特點定義的， (X)HTML中的img、input、textarea、select、object都是替換元素，這些元素都沒有實際的內容。 (X)HTML 的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。）

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

1. 最直接的clear屬性，該屬性工作表示的是框的 哪邊不應該挨著浮動框。這個屬性是對元素本身而言，通過自動為該元素增加上外邊距實現的（css1和css2），或者在上外邊距之上增加清除空間，而外邊 距本身不改變的方式（css2.1）。clear的缺陷是可能要添加額外無意義的標籤。
2. 通過父類的浮動也可以清理子類浮動，將空間撐開。這有點像負負得正。但原理應該是浮動的元素也是按照文檔流的方式布局，只不過它們是另外一個獨立的文檔流，不同於普通文檔流，暫時叫它浮動文檔流？
3. hasLayout和BFC都可以清理浮動。overflow：hidden；zoom:1；）））

display

1. display屬性取值：none、inline、inline-block、block、table相關屬性值、inherit。
2. display屬性規定元素應該產生的框的類型。文檔內任何元素都是框，塊框或行內框。
3. display：none和visiability：hidden都可以隱藏div，區別有點像absolute和relative，前者不佔據文檔的空間，後者還是佔據文檔的位置。
4. display：inline和block，又叫行內元素和區塊層級元素。表現出來的區別就是block獨佔一行，在瀏覽器中通常垂直布局，可以用margin來控制區塊層級元素之間的間距（存在margin合并的問題，只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對位置之間的外邊距不會合并。）；而inline以水平方式布局，垂直方向的margin和padding都是無效的，大小跟內容一樣，且無法設定寬高。inline就像塑料袋，內容怎麼樣，就長得怎麼樣；block就像盒子，有固定的寬和高。
5. inline-block就介於兩者之間。
6. table相關的屬性值可以用來垂直置中，效果一般。

定位機制

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

     隨便扯一些置中布局：

1. 寬高固定可以利用負 margin。.center{top：50%;margin-top:-height/2;left:50%;margin-left:-width /2;}話說現在覺得這個方法略微扯淡，要是寬高都知道，直接計算出x的值，設定個margin：x;就好了，多這麼多代碼，沒勁。所以別盡看網上的代 碼，能簡則簡，本來就沒有模式。
2. 寬高不固定的元素。.center{display：inline-block},父類設定{text-align:center}
3. 垂直置中table-cell不說了
4. {line-height：height;vertical-align:middle;}
5. {position:absolute;top:0;bottom:0;margin:auto}別忘記給父類定位{position:relative;}

 

positon 與 display 的相互關係   

   元素分為內嵌元素和區塊元素兩類（當然也有其它的），在內嵌元素中有個非常重要的常識，即內兩元素是不可以設定區塊元素所具有的樣式，例如:width | height。

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

absolute | fixed ： 元素就被重設為了區塊元素，例如：打算為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、浮動元素對文本的影響：浮動概念的基礎是圖文混排，因此同輩元素的在排版時如果浮動元素與非浮動元素之間發生覆蓋，無論是誰覆蓋誰，非浮動的元素內的文字將會被擠走，如下例：

.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中的順序一一對應。 同時該元素不脫離普通流，這比浮動來說有更大的優勢，它可以跟普通流自然互動，而不必要藉助去其他屬性。而且相比浮動，相鄰元素間的垂直對齊方 式，inline-block 比 float 更加靈活， float 格式化時有一條規則，就是越高越好（因此常常表現為頂端對齊），而 inline-block 在行內格式化，擁有更靈活的垂直對齊。 應用：
如果使用了浮動，清除浮動就會成為你的副作用，而且如果你沒有良好的HTML/CSS 結構的話，清除浮動是一個很複雜的事情。
inline-block 雖然避免了清除浮動的事情，但是會有另一個副作用，即空白符問題。這個問題的解決方案也令人十分蛋疼，因為畢竟 inline-block 不是布局屬性，它僅僅是 行內級塊容器盒子。 同時，作為IFC環境中的格式化問題，垂直置中、行高等問題也有可能是一個副作用。  其他：
其實在 CSS2.1中，利用表格 table 布局也是非常強大的方法。表格版面配置在等高，同列等寬對齊，垂直置中對齊上面的優勢是其他方法很難媲美的。甚至於在自適應情境中，表格版面配置的靈活性也非常出眾。 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.

CSS定位布局display/float/position屬性之間的關係/區別和如何使用取值行為機制