原文
大綱
1址否、定位體系的意義
2榕莺、定位體系的分類(lèi)
3、常規(guī)流：( Normal flow )
4篮绰、浮動(dòng)（Floats）
5、絕對(duì)定位（Absolute positioning）
6季惯、選擇定位方案
1吠各、定位體系的意義
CSS2.1中臀突，一個(gè)框(box，就是元素形成的方塊等)可以根據(jù)三種定位體系布局走孽。CSS2.1中的定位體系幫助作者使他們的文檔更容易理解惧辈，并不需要使用標(biāo)記的手段（如，不可見(jiàn)的圖片）達(dá)到布局的效果磕瓷。
格式化上下文決定了可視化格式模型中框的形式，定位體系布局決定了這些框在頁(yè)面中如何布局念逞。
2困食、定位體系的分類(lèi)
元素在布局時(shí)，根據(jù)3種定位體系定位翎承。分別是硕盹，常規(guī)流、浮動(dòng)和絕對(duì)定位叨咖。
3瘩例、常規(guī)流：( Normal flow )
常規(guī)流，是對(duì) normal flow的直譯甸各。
流者垛贤，動(dòng)也。偏旁是三點(diǎn)水趣倾，說(shuō)明聘惦，跟水有關(guān)系，水的流動(dòng)是連續(xù)不間斷的儒恋，也是有先后順序的善绎。在這里，我們把它當(dāng)作可以流動(dòng)的(位置可變)诫尽，有先后順序(元素順序加載)的體系禀酱。在文檔加載的時(shí)候，好像流水似的牧嫉，一點(diǎn)點(diǎn)的漫過(guò)整個(gè)畫(huà)布剂跟。還有一種說(shuō)法是，瀏覽器在解析HTML CSS JS 的時(shí)候的一個(gè)流式的過(guò)程驹止，從html起始標(biāo)簽開(kāi)始 到html結(jié)束標(biāo)簽截止浩聋。
之所以是常規(guī)，是因?yàn)殡担@是相對(duì)于后面的浮動(dòng)和定位的一個(gè)概念衣洁，浮動(dòng)和定位元素都脫離了當(dāng)前的常規(guī)流。
在 CSS2.1中抖仅，常規(guī)流包括塊框(block boxes)的塊格式化(blok formatting 后續(xù)會(huì)講到)坊夫，行內(nèi)框(inline boxes)的行內(nèi)格式化(inline formatting 后續(xù)會(huì)講到)砖第，塊框或行內(nèi)框的相對(duì)定位，以及插入框的定位环凿。
在 CSS 中梧兼，元素定義的環(huán)境有兩種，一種是塊格式化上下文( Block formatting context )智听，另一種是行內(nèi)格式化上下文( Inline formatting context )羽杰。 這兩種上下文定義了在 CSS 中元素所處的環(huán)境，格式化則表明了在這個(gè)環(huán)境中到推，元素處于此環(huán)境中應(yīng)當(dāng)被初始化考赛，即在常規(guī)流中的框，都屬于一個(gè)格式化的上下文中等莉测。
4颜骤、浮動(dòng)（Floats）
浮動(dòng)，顧名思義捣卤，相對(duì)于常規(guī)流來(lái)講忍抽，它漂浮在常規(guī)流的上方。因?yàn)樗辉偬幱谖臋n流中董朝，所以它不占據(jù)空間鸠项。
在浮動(dòng)模型中，一個(gè)框(box)首先根據(jù)常規(guī)流布局益涧，再將它從流中取出并盡可能地向左或向右偏移锈锤。內(nèi)容可以沿浮動(dòng)區(qū)的側(cè)面排列。因?yàn)樗紫纫鶕?jù)常規(guī)布局后才偏移闲询，所以效率較常規(guī)流低久免。
用 ‘float’ 特性聲明浮動(dòng)，特性值可以是：”none”扭弧、”left”阎姥、”right”。
5鸽捻、絕對(duì)定位（Absolute positioning）
在絕對(duì)定位模型中呼巴，一個(gè)框(box)整個(gè)地從常規(guī)流向中脫離（它對(duì)后續(xù)的兄弟元素沒(méi)有影響），并根據(jù)它的包含塊來(lái)分配其位置御蒲。
6衣赶、選擇定位方案
‘float’和’position’特性決定了使用哪種CSS2.1定位算法來(lái)計(jì)算框的位置。
不同的position選擇不同的定位算法厚满。
6.1府瞄、static
該框(box)是一個(gè)常規(guī)框，布局根據(jù)常規(guī)流碘箍。'left' 遵馆、’right’鲸郊、’bottom’和 'top'屬性不適用。
如果 ‘position’沒(méi)有設(shè)置货邓，默認(rèn)值也是’static’秆撮。這時(shí)，設(shè)置'left' 换况、’right’职辨、’bottom’和 'top’，無(wú)效戈二。
6.2拨匆、relative
框的位置根據(jù)常規(guī)流計(jì)算（被稱(chēng)為常規(guī)流中的位置）。然后框相對(duì)于它的常規(guī)位置而偏移挽拂。如果框 B 是相對(duì)定位的，其后框的定位計(jì)算并不考慮 B 的偏移骨饿。 table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, 和 table-caption 元素的 ‘position:relative’ 效果沒(méi)有被定義亏栈。
相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置宏赘。
在使用相對(duì)定位時(shí)绒北，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間察署。因此闷游，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。
<div style="position:static; width:100px;">
<div id="A" style="background-color:green;">A</div>
<div id="B" style=" position:relative; top:10px; left:10px; background-color:red;">B</div>
<div id="C" style="background-color:blue;">C</div>
</div>
6.3贴汪、absolute
元素框從文檔流完全刪除脐往，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊扳埂。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉业簿，就好像元素原來(lái)不存在一樣。
框的位置（可能還有它的尺寸）是由’left’阳懂，’right’梅尤，’top’和’bottom’特性決定。這些特性指定了框相對(duì)于它包含塊的偏移量岩调。 絕對(duì)定位（”position: absolute”）元素的包含塊由離它最近的 ‘position’ 屬性為 ‘a(chǎn)bsolute’巷燥、’relative’ 或者 ‘fixed’ 的祖先元素創(chuàng)建。絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素号枕，如果元素沒(méi)有已定位的祖先元素缰揪，那么它的位置相對(duì)于最初的包含塊。根據(jù)用戶的代理不同堕澄，最初的包含快可能是畫(huà)布或HTML元素邀跃。
絕對(duì)定位的框從常規(guī)流向中脫離霉咨。這意味著它們對(duì)其后的兄弟元素的定位沒(méi)有影響。另外拍屑，盡管絕對(duì)定位框有外邊距(margin)途戒， 它們不會(huì)和其它任何外邊距發(fā)生折疊（Collapsing margins）。
因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)僵驰，所以它們可以覆蓋頁(yè)面上的其它元素喷斋。可以通過(guò)設(shè)置 z-index 屬性來(lái)控制這些框的堆放次序蒜茴。
<div style="position:absolute; width:300px; border:2px solid yellow;">
<div id="A" style="background-color:green; height:50px;">A</div>
<div id="B" style="position:absolute; top:70px; left:50px; height:50px; background-color:red;">B</div>
<div id="C" style="background-color:blue; height:50px;">C</div>
</div>
6.4星爪、fixed
框位置的計(jì)算根據(jù)'absolute'模型，不過(guò)框要額外地根據(jù)一些參考而得到固定粉私。跟絕對(duì)定位一樣顽腾，fixed定位元素的margin不會(huì)和任何其他 margin發(fā)生margin折疊。應(yīng)用于手持終端诺核、投影設(shè)備抄肖、屏幕、TTY窖杀、電視媒體類(lèi)型時(shí)漓摩，框相對(duì)于 viewport 固定，滾動(dòng)時(shí)不移動(dòng)入客。應(yīng)用于打印媒介類(lèi)型時(shí)管毙，框被渲染于每一頁(yè)，并相對(duì)于頁(yè)框固定桌硫，就好象是通過(guò)viewport查看該頁(yè)一樣（例如夭咬，打印預(yù)覽）。對(duì)于其他的媒介類(lèi)型鞍泉，表現(xiàn)沒(méi)有被定義皱埠。
參考網(wǎng)址
http://www.html5jscss.com/box-context.html
http://bbs.csdn.net/topics/340223607
http://blog.csdn.net/syf19720428/article/details/51993072
