@參考文檔：http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html
@什么叫脫離文檔流？注意，只有絕對定位absolute和浮動float才會脫離文檔流！
答案：CSS中脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。
---部分無視和完全無視的區別？需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對於使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)
@相對定位和絕對定位的經典案例，還有百分比布局的經典案例， 在博客園文件空間中可以下載測試，在素材庫bootstrap3常用布局實踐案例中也可以找到。
@注意事項：
1，（！！！relative偏移導致標簽元素重疊問題！！！）布局中注意的一個問題，就是一個div如果使用了相對定位relative，並且相對自己原位置發生了偏移，就會偏移到其他div的位置(不會把其他標簽撐開，而是產生重疊)，例如一個div向下偏移了20px，那么下邊的div就會和上邊的div發生重疊。解決方法？對下邊的div也設置相對定位relative屬性，並發生20px的位移，就可以了。
2，（！！！元素標簽占用文檔流問題！！！）例如ul li標簽，li設置了浮動，會不占用空間，ul不設置浮動，設置高度和寬度會占用空間（文檔流），也就是說只有外層和內層元素都設置浮動，才會脫離文檔流。
3，（！！！清除內部浮動！！！）內層元素設置浮動，外層元素不設置浮動和高度，內層元素不能撐開外層元素高度問題，如何解決，如下代碼和圖？
<style>
.par {
border: 5px solid #fcc;
width: 300px;
/*height:110px; 注意這里給外層元素設置相應高度，外層元素會包裹內層元素，並占用文檔流*/
/*float:left; 或者給外層元素設置浮動，外層元素也會包裹內層元素，但不會占用文檔流空間*/
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
---上邊代碼顯示頁面（內層元素不能撐開外部元素）
---上邊給出了2種解決方案，第一種方案，外層元素設置高度，寫死了，如果內部元素高度發生變化，外層層元素寫死了，不太好。第二種解決方案，會脫離文檔流也不太好。最好的解決方案（為外層元素加overflow屬性）：.par { overflow: hidden; } //清除內部浮動，外層元素par在計算高度時，par內部的浮動元素child也會參與計算。
@浮動--->浮動是將，塊元素的霸道屬性，獨占一行的行為，取消，允許別的元素對象和他一行。
0，float設計初衷就是為了實現文字環繞效果 http://www.cnblogs.com/liyunhua/p/4670908.html
1，定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
---浮動其實是，這個塊，從原來的文檔流模式中，分離出來，沒有了獨占屬性，它后面的元素對象，就視它不存在。
2，注意下圖，加了向左屬性后的效果如下圖，div1向左漂到body的邊界處頂端，div2以為div1不存在了，就跑了上去，div1會覆蓋在div2的上面。擋着，遮住了div2，把div2寬度放大就能看到div2。
---注意下圖中2這個數字沒有在原來的位置，而是被div1頂開了，為什么？注意看上邊脫離文檔流定義，div2會無視div1這個元素，但是div2內的文本依然會為div1讓出位置，環繞在div1周圍。也就是部分無視。
3，浮動的兩種常見應用：
---浮動最常用到的就是幾個標簽元素全部浮動起來，列成一行。例如下圖中，如果給div2，加個float:left;浮動，div2就不會和div1重疊，而是並列一樣，同理div3一樣。
---浮動還有一種應用，就是布局，通常是單個div浮動起來，進行布局。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
div{
width:100px;
height:100px;
font-size:24px;
font-weight:bold;
}
#one{background:red;float:left;}
#two{background:green;width:200px;height:200px;}
#three{background:blue;}
</style>
</head>
<body>
<div id="one">1,加了浮動屬性向左</div>
<div id="two">2</div>
<div id="three">3</div>
</body>
</html>
3，*****口訣：浮動浮動，先浮后動；浮動的對象，會先漂浮起來，離開原來的位置，后動，就是它后面的對象。會向它原來的位置上，動起來。
@定位
1，定位的分類
---默認值static是無定位的！！！所以不能當做絕對定位的參照物。
---相對定位的參照物就是自己。
---fixed定位，就是把某個標簽元素，放在網站的某一個位置，例如右下角，不管瀏覽器怎么放大縮小，它就在右下角，即使看不見了，其實它還在右下角。通俗的說，就是把某個標簽元素定在網頁的某個位置。相對於相對定位和絕對定位，fixed不具有一點的靈活性，所以很多地方不能用fixed，例如遮罩層等等。
(1)，什么叫相對定位？
Relative，CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以自身為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。
在文檔流中，每個塊元素都會被安排到流中的一個位置，我們可以通過CSS中的定位屬性來重新安排它的位置。定位分為相對定位和絕對定位，相對定位是相對於該塊元素在文檔流中的位置的(即相對自己的原始所在位置！假如屬性設置為position:relative;top:0px;left:0px;，即表示位置不變！相對自己的原始位置沒有變化，有的人就會問？既然沒有變化，為什么還要加這個屬性呢，答案為了充當絕對定位標簽元素的參照物，看下邊第2條關於絕對定位的參照物問題。)，比如，我們可以使用相對定位把div2放到div1的右側，代碼和示例圖如下：
#div1 {
border: 1px solid #000099; height: 60px; width: 200px; margin:2px;
}
#div2 { border: 1px solid #000099; height: 60px; width: 200px; margin:2px; position: relative; top: -64px; left: 204px;}#div3 { border: 1px solid #000099; height: 60px; width: 200px; margin:2px;}
可以看到一個有趣的現象，那就是雖然我們把div2移走了，但是div1和div3中間還是有一個空間，說明相對定位的元素是會占據文檔流空間的，這里的div2就是典型的“站着茅坑不拉屎”。
注意，標簽中設置了position:relative;屬性，不設置left，right和top，bottom的值，這些值則默認值為0。注意，即使不設置值同樣起到了相對定位作用，其子孫級別標簽使用position:absolute;時同樣會起到定位效果。
(2)，什么叫絕對定位？
重點：絕對定位默認是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。
如果設定TRBL並且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后TRBL用百分比寬度表示。
使用絕對定位也是可以把div2擺到div1的右邊的，而且絕對定位是不會占據文檔流空間的，如下圖，div1和div3之間沒有空白：
---絕對定位使元素的位置與文檔流無關，因此不占據空間(即設置了絕對定位屬性的標簽，其下邊標簽會無視其的存在，因為它不占據空間。)。 這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
div2的CSS代碼：
border: 1px solid #000099; height: 60px; width: 200px; margin:2px; position: absolute; top: 15px; left: 214px;}
絕對定位是個好東西，可以把內容顯示到頁面上的任何位置，但是對於我們程序員來說，卻不能使用太多的絕對定位，因為使用程序動態向div中添加內容，div的大小是不可知的，無法將每一個div的位置都定死。
絕對定位是一把雙刃劍，使用不好，瀏覽器或者屏幕的變大縮小，都會使其產生嚴重的錯位變化！！！
參考文檔：http://blog.chinaunix.net/uid-14767524-id-2785537.html
注意，絕對定位，一定要選擇一個具有相對定位屬性，並且位置不會變的標簽元素進行定位，才可以。
2，重點，終極解釋，關於絕對定位參照物的問題！！！
(1)，層級關系為：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物
<div—————————-沒有設置為定位元素，不是參照物
<div———————- position:relative 參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
(2)，為改變參照物（橘色框）后的效果
層級關系為：
<div ——————————— position:relative;最近的祖先定位元素，參照物
<div—————————-沒有設置為定位元素，不是參照物
<div———————-沒有設置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
(3)，參照物為最頂級的元素情況。
層級關系為：
<div ———————————沒有設置為定位元素，不是參照物
<div—————————-沒有設置為定位元素，不是參照物
<div———————-沒有設置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
(4)，僅使用margin屬性布局絕對定位元素的情況
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性布局相對定位元素。
層級關系為：
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設置為定位元素，不是參照物
<div———————-沒有設置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
(5)，IE6的情況下，box2前面沒有兄弟節點，則margin-left的值會出現雙倍邊距，見圖10。
層級關系為：
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設置為定位元素，不是參照物
<div———————-沒有設置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果圖：
3，終極解決方案：
---參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
4，絕對定位的層設好要參照位置的層后，就可以用TOP，LEFT這些來定位置了，如果它的上級或上上級都沒定位的話只就會根據BODY的位置來定位了,還有最后一點，絕對定位是不占位置的，它會像PS的圖層一樣單獨做一層，至於第幾層你可以通過z-index:這個屬性來設置。