（注1：如果有問(wèn)題歡迎留言探討讯屈，一起學(xué)習(xí)绑蔫！轉(zhuǎn)載請(qǐng)注明出處运沦，喜歡可以點(diǎn)個(gè)贊哦！）
（注2：更多內(nèi)容請(qǐng)查看我的目錄配深。）
1. display携添，position，float 之間的關(guān)系
這三個(gè)屬性均會(huì)影響盒的生成及布局篓叶，它們的交互如下：
如果 display 值為 none 烈掠，那么 position 和 float 不生效。這種情況下缸托，元素不生成盒左敌。
否則，如果 position 值為 absolute 或 fixed 嗦董，盒為絕對(duì)定位absolutely positioned母谎， float 的計(jì)算值為 none ， display 的設(shè)置如下表京革。盒的位置由 top 奇唤、 right 、 bottom 和 left 屬性以及盒的包含塊決定匹摇。
否則咬扇，如果 float 值不為 none ，盒浮動(dòng)并且 display 的設(shè)置如下表廊勃。
否則懈贺，如果元素為根元素， display 設(shè)置如下表坡垫，除了其在CSS2.2中未定義 list-item 的指定值是否變?yōu)橛?jì)算值 block 或 list-item 梭灿。
否則， dislay 屬性值使用指定值冰悠。
2. 標(biāo)準(zhǔn)流 normal flow堡妒，浮動(dòng) floats 和絕對(duì)定位 absolute positioning 的比較
為了說(shuō)明標(biāo)準(zhǔn)流，相對(duì)定位溉卓，浮動(dòng)和絕對(duì)定位之間的區(qū)別皮迟，我們提供了一系列基于以下HTML的示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id="outer"> Start of outer contents.
<SPAN id="inner"> Inner contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
</HTML>
該文檔中假設(shè)有如下規(guī)則：
body {
display: block;
font-size: 12px;
line-height: 200%;
width: 400px;
height: 400px
}
p {
display: block
}
span {
display: inline
}
在每個(gè)示例中搬泥，外部和內(nèi)部元素生成的框的最終位置有所不同。在每個(gè)插圖中伏尼，插圖左邊的數(shù)字表示標(biāo)準(zhǔn)流位置中的雙倍行距（為了清晰）忿檩。
注：下述圖表僅供參考，并不按比例顯示爆阶。它們旨在突出CSS 2.2中各種定位方案之間的差異燥透，而不是作為給定示例的參考渲染。
2.1 標(biāo)準(zhǔn)流 normal flow
考慮以下對(duì)outer和inner的CSS聲明扰她，這些聲明不會(huì)改變盒的標(biāo)準(zhǔn)流：
#outer { color: red }
#inner { color: blue }
P元素包含所有行內(nèi)內(nèi)容： 匿名行內(nèi)文本anonymous inline text
和兩個(gè)SPAN元素兽掰。因此，所有的內(nèi)容將被放置在一個(gè)IFC中徒役，處于由P元素建立的包含塊內(nèi)孽尽，產(chǎn)生類似如下內(nèi)容：
2.2 相對(duì)定位 relative positioning
為了查看相對(duì)定位的效果，我們指定：
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
文本正常流向outer元素忧勿。然后杉女， outer的文本將流入其標(biāo)準(zhǔn)流內(nèi)位置并在第一行末尾被分割。然后鸳吸，包含文本（分布于三行）的這些行盒會(huì)整體位移“-12px”（向上移動(dòng)）熏挎。
作為outer子元素inner的內(nèi)容，會(huì)在標(biāo)準(zhǔn)流中緊接"of outer contents"單詞（在1.5行）流入晌砾。然而坎拐，inner內(nèi)容本身相對(duì)于outer內(nèi)容偏移'12px'（向下），回到它們?cè)诘?行的原始位置养匈。
請(qǐng)注意哼勇，跟在outer元素之后的內(nèi)容不受outer相對(duì)定位的影響。
另外要注意呕乎，outer偏移量若為'-24px'积担，outer文本會(huì)和body文本產(chǎn)生重疊。
現(xiàn)在考慮通過(guò)如下規(guī)則將inner元素的文本浮動(dòng)到右邊：
#outer { color: red }
#inner { float: right; width: 130px; color: blue }
inner盒脫離標(biāo)準(zhǔn)流向右浮動(dòng)到right margins（盒的寬度已經(jīng)顯示指定）猬仁，文本正常流向inner盒帝璧。inner盒左側(cè)的行盒均被縮短，文檔中剩余的文本會(huì)流入它們湿刽。
為了展示'clear'屬性的效果的烁，我們?cè)谑纠刑砑恿艘粋€(gè)兄弟元素：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes II</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id=outer> Start of outer contents.
<SPAN id=inner> Inner contents.</SPAN>
<SPAN id=sibling> Sibling contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
</HTML>
帶有如下規(guī)則：
#inner { float: right; width: 130px; color: blue }
#sibling { color: red }
導(dǎo)致inner盒像之前一樣向右浮動(dòng)，并且文檔中的剩余文本流入空出的空間：
但是诈闺，如果兄弟元素的clear屬性設(shè)置為'right'（即撮躁，生成的兄弟盒不會(huì)接受處于 其右側(cè)還緊鄰一個(gè)浮動(dòng)盒 的位置），那么兄弟內(nèi)容會(huì)在float之下開(kāi)始流動(dòng)：
#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
2.3 絕對(duì)定位 absolute positioning
最后买雾，我們考慮絕對(duì)定位的影響把曼。考慮以下用于outer和 inner的CSS聲明：
#outer {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
color: red;
}
#inner { color: blue }
這會(huì)導(dǎo)致outer盒的top相對(duì)于其包含塊containing block定位漓穿。定位盒的包含塊由最近的定位祖先positioned ancestor（或者嗤军，如果不存在，使用初始包含塊晃危，正如本例中所示）叙赚。outer盒的top side在其包含塊的top之下200px，left side在其包含塊的left之右200px僚饭。outer的子盒相對(duì)于其父級(jí)以標(biāo)準(zhǔn)方式流動(dòng)震叮。
下面的示例顯示一個(gè)絕對(duì)定位盒是一個(gè)相對(duì)定位盒的孩子。盡管父親outer盒實(shí)際上并沒(méi)有偏移鳍鸵，但將其“position”屬性設(shè)置為“relative”表示該盒可以用作定位后代的包含塊苇瓣。由于outer盒是一個(gè)行內(nèi)盒，被分割到多行偿乖，第一個(gè)行內(nèi)盒的top edge 和 left edge（由下圖中的粗虛線表示）作為“top”和“l(fā)eft”偏移的參考击罪。
#outer {
position: relative;
color: red
}
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
結(jié)果如下所示：
如果不對(duì)outer盒進(jìn)行定位：
#outer { color: red }
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
inner的包含塊將是初始包含塊initial containing block（見(jiàn)示例）。下圖顯示了此種情況下inner盒的位置贪薪。
如下例所示媳禁，可以使用相對(duì)定位和絕對(duì)定位來(lái)實(shí)現(xiàn)更改條。
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>
可能會(huì)有如下結(jié)果：
首先画切，該段落（其包含塊邊在圖中顯示）正常流動(dòng)竣稽。然后它從包含塊的left margin向右偏移了'10px'（因此，為該偏移量預(yù)留了'10px'的margin）霍弹。作為變化條的兩個(gè)連字符脫離標(biāo)準(zhǔn)流并位于當(dāng)前行（由于'top：auto'）毫别，從其包含塊（由P在其最終位置建立）的左邊緣開(kāi)始右移'-1em'。結(jié)果是變化條似乎“浮動(dòng)”到當(dāng)前行的左側(cè)庞萍。
參考
https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS2/visuren.html
CSS規(guī)范 > 9 視覺(jué)格式化模型 Visual Formatting Model
