CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自動(dòng)排列自動(dòng)折行, 但需要clear來(lái)配合清除浮動(dòng);
display: inline-block; 有些時(shí)候可以替代float實(shí)現(xiàn)相同的效果.
position: absolute|relative; 要配合top,left等定位;
position: absolute會(huì)導(dǎo)致元素脫離文檔流，被定位的元素等于在文檔中不占據(jù)任何位置，在另一個(gè)層呈現(xiàn)，可以設(shè)置z-index。PS的圖層效果就是position: absolute。
float也會(huì)導(dǎo)致元素脫離文檔流，但還在文檔或容器中占據(jù)位置，把文檔流和其它float元素向左或向右擠，并可能導(dǎo)致?lián)Q行。圖片的文字環(huán)繞布局效果就是float。
display的inline-block不脫離文檔流，將block元素當(dāng)作大型字符嵌入文檔流內(nèi)，類似于img或者input默認(rèn)效果。
===================================================
補(bǔ)充，其實(shí)這個(gè)答案完全沒(méi)有回答問(wèn)題，因?yàn)樘釂?wèn)者說(shuō)：
不用解釋每個(gè)的概念，僅談應(yīng)用上的區(qū)別。
應(yīng)用范圍是？或者說(shuō)在什么情況下優(yōu)先使用哪個(gè)？
盡管都能實(shí)現(xiàn)某一效果
但是我想回答的是，這三種方式產(chǎn)生的排版效果是截然不同的，只有充分理解了他們的排版效果，才能作出最好的決定。
position
float
????（（（不想脫離出去講清理浮動(dòng)- -||，還是少說(shuō)些。。。
display
定位機(jī)制
?????隨便扯一些居中布局：
?
positon 與 display 的相互關(guān)系???
???元素分為內(nèi)聯(lián)元素和區(qū)塊元素兩類（當(dāng)然也有其它的），在內(nèi)聯(lián)元素中有個(gè)非常重要的常識(shí)，即內(nèi)兩元素是不可以設(shè)置區(qū)塊元素所具有的樣式，例如:width | height。
relative : 原來(lái)是什么類型的依舊是什么類型。?
absolute | fixed ： 元素就被重置為了區(qū)塊元素，例如：打算為span元素指定大小，并絕對(duì)定位?
????<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 的相互關(guān)系
???一個(gè)元素若設(shè)置了?position:absolute | fixed; 則該元素就不能設(shè)置float。這是一個(gè)常識(shí)性的知識(shí)點(diǎn)，因?yàn)檫@是兩個(gè)不同的流，一個(gè)是浮動(dòng)流，另一個(gè)是“定位流(這是自己起的名字，呵呵)”。
但是 relative 卻可以。因?yàn)樗舅嫉目臻g仍然占據(jù)文檔流。
position: relative和position: absolute 都可以改變?cè)卦谖臋n中的位置，設(shè)置position: relative 或 position: absolute都可以讓元素激活left、top、right、bottom 和 z-index 屬性。
網(wǎng)頁(yè)雖然看起來(lái)是平面的二維結(jié)構(gòu)，但它其實(shí)是有z軸的，z軸的大小由z-index 控制，默認(rèn)情況下，所有元素都是在z-index: 0 這一層的，這就是文檔流。設(shè)置position: relative 或 position: absolute會(huì)讓元素浮起來(lái)（就像游戲中的概念-多層圖層），也就是z-index大于0，它會(huì)改變正常情況下的文檔流。不同的是position: relative 會(huì)保留自己在z-index:0 層的位置，但是它的實(shí)際位置可能因?yàn)樵O(shè)置了left、top、right、bottom值而偏離原來(lái)在文檔流中的位 置，但對(duì)其他仍然在z-index:0層的元素位置不會(huì)造成影響。而position: absolute會(huì)完全脫離文檔流，不再在z-index:0層保留占位符，其left、top、right、bottom 值是相對(duì)于自己最近的一個(gè)位置–設(shè)置了position: relative 或 position: absolute的祖先元素的，如果祖先元素都沒(méi)有設(shè)置position: relative 或 position: absolute，那么就相對(duì)于body元素。
除了position: relative 和 position: absolute，float也能改變文檔流，不同的是，float屬性不會(huì)讓元素“上浮”到另一個(gè)z-index層，它仍然讓元素在z-index:0 層排列，float不像position: relative 和 position: absolute那樣，它不能通過(guò)left、top、right、bottom屬性精確地控制元素的坐標(biāo)，它只能通過(guò)float:left 和 float:right 來(lái)控制元素在同層里“左浮”和“右浮”。float會(huì)改變正常的文檔流排列，影響到周圍元素。
另一個(gè)有趣的現(xiàn)象是position: absolute 和 float會(huì)隱式地改變display類型，不論之前什么類型的元素（display:none除外），只要設(shè)置了position: absolute 或 float中任意一個(gè)，都會(huì)讓元素以display:inline-block的方式顯示：可以設(shè)置長(zhǎng)寬，默認(rèn)寬度并不占滿父元素。就算我們顯式地設(shè)置 display:inline或者display:block，也仍然無(wú)效（float在IE6 下的雙倍邊距bug就是利用添加display:inline來(lái)解決的）。值得注意的是，position: relative卻不改變display的類型。
1、position?對(duì)?float?的影響：float?可以說(shuō)是定義同輩元素之間的位置關(guān)系，浮動(dòng)元素相對(duì)于父元素，其位置的定義是確定不變的的：基于position:static/relative時(shí)的位置，向左側(cè)或右側(cè)靠近(一個(gè)可能的錯(cuò)誤的認(rèn)識(shí)是，浮動(dòng)元素會(huì)向左上角或右上角浮動(dòng))，
因此，position:static?和?position:relative?與?float?的效果可以疊加，?
但?position:absolute、position:fixed?這兩個(gè)定位屬性依賴于自身元素之外的參照，將使?float?的效果無(wú)法表現(xiàn)出來(lái)。
?
2、浮動(dòng)元素對(duì)文本的影響：浮動(dòng)概念的基礎(chǔ)是圖文混排，因此同輩元素的在排版時(shí)如果浮動(dòng)元素與非浮動(dòng)元素之間發(fā)生覆蓋，無(wú)論是誰(shuí)覆蓋誰(shuí)，非浮動(dòng)的元素內(nèi)的文字將會(huì)被擠走，如下例：
.elm{?width:100px;?height:50px;background:green;?border:1px?solid?red;???}
.lf{float:left;?}
?
float
no?float，被擠走?
?
3、浮動(dòng)元素對(duì)父元素的影響：浮動(dòng)元素的父元素丟失?block?高度，即使定義了高度，也無(wú)法影響其同輩浮動(dòng)元素及其浮動(dòng)的子元素的布局，默認(rèn)情況下，如果父元素沒(méi)有定義高度，則父元素的內(nèi)容會(huì)撐開(kāi)父元素，達(dá)到自適應(yīng)?block?高度的效果，浮動(dòng)元素?zé)o法撐開(kāi)其父元素的block?高度。
?
4、浮動(dòng)元素對(duì)自身的影響：浮動(dòng)元素將按?inline-block?形式布局（haslayout），即使將他設(shè)置為?display:inline;，因此，默認(rèn)寬度自動(dòng)擴(kuò)展為100%的元素浮動(dòng)之后，寬度由元素內(nèi)容撐大，原來(lái)沒(méi)有高寬屬性的元素也變得可以定義高寬；如果出現(xiàn)重疊，浮動(dòng)元素將疊加在非浮動(dòng)的同輩元素之上（像是具有更大的z-index值）；
?
5、display, position, float 之間的相互關(guān)系： 1. 如果display等于none，則用戶端必須忽略position和float。在這種情況下，元素不產(chǎn)生盒子。 2. 否則，如果position等于absolute，則display與float皆強(qiáng)制為none(list-item保持不變)。盒子的位置由邊界偏移量確定。 3. 否則，如果float不等于none或該元素是根元素，則display強(qiáng)制為block(list-item保持不變)。 4. 否則，使用指定的display屬性。 1、絕對(duì)定位完全脫離普通流，因此絕對(duì)定位元素?zé)o法跟普通流搭建交互關(guān)系（普通流能影響絕對(duì)定位，絕對(duì)定位不影響普通流），這樣來(lái)說(shuō)，在一些自適應(yīng)布局場(chǎng) 景中，絕對(duì)定位就存在一些缺陷（需要更多的限制因素，非常不靈活）。如果希望用絕對(duì)定位實(shí)現(xiàn)你說(shuō)的 float 或 inline-block 同樣的效果，這個(gè)時(shí)候一般是不推薦用 絕對(duì)定位。2、對(duì)于浮動(dòng)，這個(gè)屬性一般不是用來(lái)做布局的（偏向于排版），但是CSS2.1好像也就這個(gè)屬性 能夠滿足一些特定需求，所有才有了浮動(dòng)布局。浮動(dòng)相對(duì)絕對(duì)定位好處是，它默認(rèn)可以影響行內(nèi)布局，通過(guò) clear 清除浮動(dòng)也可以影響 塊布局，可以與普通流建立良好的交互。 而且浮動(dòng)本身是脫離普通流的，在元素的水平定位上相比于 inline-block 更加靈活多變， 而 inline-block 的水平定位則更加有序。
3、inline-block，這個(gè)屬性也不是用來(lái)布局的（偏向于排版），但是在 CSS3 普及之前，它的用處也很大。該元素的盒子在行框中進(jìn)行格式化，其順序與源HTML中的順序一一對(duì)應(yīng)。 同時(shí)該元素不脫離普通流，這比浮動(dòng)來(lái)說(shuō)有更大的優(yōu)勢(shì)，它可以跟普通流自然交互，而不必要借助去其他屬性。而且相比浮動(dòng)，相鄰元素間的垂直對(duì)齊方 式，inline-block 比 float 更加靈活， float 格式化時(shí)有一條規(guī)則，就是越高越好（因此常常表現(xiàn)為頂端對(duì)齊），而 inline-block 在行內(nèi)格式化，擁有更靈活的垂直對(duì)齊方式。應(yīng)用：
如果使用了浮動(dòng)，清除浮動(dòng)就會(huì)成為你的副作用，而且如果你沒(méi)有良好的HTML/CSS 結(jié)構(gòu)的話，清除浮動(dòng)是一個(gè)很復(fù)雜的事情。
inline-block 雖然避免了清除浮動(dòng)的事情，但是會(huì)有另一個(gè)副作用，即空白符問(wèn)題。這個(gè)問(wèn)題的解決方案也令人十分蛋疼，因?yàn)楫吘?inline-block 不是布局屬性，它僅僅是 行內(nèi)級(jí)塊容器盒子。 同時(shí)，作為IFC環(huán)境中的格式化問(wèn)題，垂直居中、行高等問(wèn)題也有可能是一個(gè)副作用。 其他：
其實(shí)在 CSS2.1中，利用表格 table 布局也是非常強(qiáng)大的方法。表格布局在等高，同列等寬對(duì)齊，垂直居中對(duì)齊上面的優(yōu)勢(shì)是其他方法很難媲美的。甚至于在自適應(yīng)場(chǎng)景中，表格布局的靈活性也非常出眾。 float: left|right; 可以自動(dòng)排列自動(dòng)折行, 但需要clear來(lái)配合清除浮動(dòng);
display: inline-block; 有些時(shí)候可以替代float實(shí)現(xiàn)相同的效果.
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>表現(xiàn):
上面的是float, 中間的是inline-block, 下面的是position, 可以看出:
1. 當(dāng)居右(右浮動(dòng))時(shí), float是按先后順序來(lái)的, 先寫(xiě)的排子右邊; 而inline-block則保持左右順序不變.
2. 在部分瀏覽器中(以上是在的firefox中), 空行或空格會(huì)影響到inline-block, 卻不會(huì)影響到float的block.
3. position只能配合left,right來(lái)定位, 如果去掉則重疊在一起; 不能借助clear等自動(dòng)擴(kuò)展容器.
4. 他們都有共同點(diǎn), 如果包裹的是行級(jí)元素, 則寬度可以按內(nèi)容寬度自適應(yīng).
?
使用場(chǎng)景:
照片墻, 選項(xiàng)卡, 導(dǎo)航條等可以使用inline-block或float, 推薦inline-block, 但需要注意瀏覽器兼容, 用float記得習(xí)慣性的使用clear.
Tip等提示, 懸浮窗, 遮罩等, 建議使用position.
轉(zhuǎn)載于:https://www.cnblogs.com/eaysun/p/4052079.html
總結(jié)
以上是生活随笔為你收集整理的CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： POJ 2955 (区间DP)
- 下一篇： C#以post方式调用struts re