先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
- 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。
只有絕對定位absolute和浮動float才會脫離文檔流。
---部分無視和完全無視的區別？需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對於使用absolute position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)
[1]浮動-定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（注意這里是塊框而不是內聯元素；浮動框只對它后面的元素造成影響）
問題1：浮動元素后跟block元素&浮動元素后跟inline元素對布局的影響
浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。如下第一個例子box2是浮動框，其后跟一個塊元素；例子2是浮動框后跟一個內聯元素。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{background-color:pink;width:100px;height:100px;}
#box2{background-color:green;width:100px;height:100px;float:left;}
#box3{background-color:red;width:200px;height:200px;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2 向左浮動</div>
<div id="box3">box3</div>
<!--<span id="box3">span3</span>-->
</bod
問題2：元素浮動造成的兩個div覆蓋或相互重疊如何解決。
（1）、左右結構div盒子重疊現象，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會照成覆蓋現象，只有DIV形成覆蓋現象。
解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。如上面的例1中box2寬度是100，只需要對box3設置margin-left：102px就可以實現不重疊。
（2）、上下結構div盒子重疊現象
1 <head> 2 <meta charset="UTF-8"> 3 <title></title> 4 <style type="text/css"> 5 *{margin:0;padding:0;} 6 .container{border:1px solid red;width:300px;} 7 #box1{background-color:green;float:left;width:100px;height:100px;} 8 #box2{background-color:deeppink; float:right;width:100px;height:100px; } 9 #box3{background-color:pink;height:40px;} 10 </style> 11 </head> 12 <body> 13 14 <div class="container"> 15 <div id="box1">box1 向左浮動</div> 16 <div id="box2">box2 向右浮動</div> 17 </div> 18 <div id="box3">box3</div> 19 </body>
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
解決方法：
1、要么給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“..container是可以設置一個高度即可解決覆蓋問題。
2、要么清除浮動。清除浮動后的效果如下：
2-1：使用css clear清除浮動，在.container盒子閉合前加clear樣式清除浮動。
深入理解clear屬性：
clear屬性規定元素的哪一側不允許出現浮動元素，他的語法如下：
clear語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。
務必記住這句話：“float是魔鬼，會影響其他相鄰元素；但是clear是小白，其只會影響自身，不會對其他相鄰元素造成影響！”
例如：下圖例3 box1向右側浮動，box2不設置clear屬性時的示意圖；例4中box1向右側浮動，box2設置clear：right，表示右側不允許出現浮動元素，則box2自動下移一行。
同樣的，如果是box1向左浮動，box2和box1則會出現重疊，如例5；但如果在box2中設置clear：left；表示左側不允許出現浮動元素，則box2同樣會下移。
但是為了計算方便：一般都會增加一個空div塊，並使用clear：both來設定表示兩側都不允許有浮動元素。這樣新的空div塊會下移，達到撐開父元素的目的。
1 <head> 2 <meta charset="UTF-8"> 3 <title>DIV 相互重疊</title> 4 <style type="text/css"> 5 *{margin:0;padding:0;} 6 .container{border:1px solid red;width:300px;} 7 #box1{background-color:green;float:left;width:100px;height:100px;} 8 #box2{background-color:deeppink; float:right;width:100px;height:100px; } 9 #box3{background-color:pink;height:40px;} 10 .clear{clear:both;} 11 </style> 12 </head> 13 <body> 14 15 <div class="container"> 16 <div id="box1">box1 向左浮動</div> 17 <div id="box2">box2 向右浮動</div> 18 <div class="clear"></div> 19 </div> 20 <div id="box3">box3</div> 21 </body>
2-2：給父元素設置overflow：hidden來清除浮動。
這里我們可以這樣理解：overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
1 <head> 2 <meta charset="UTF-8"> 3 <title>DIV 相互重疊</title> 4 <style type="text/css"> 5 *{margin:0;padding:0;} 6 .container{border:1px solid red;width:300px;overflow:hidden;} 7 #box1{background-color:green;float:left;width:100px;height:100px;} 8 #box2{background-color:deeppink; float:right;width:100px;height:100px; } 9 #box3{background-color:pink;height:40px;} 10 .clear{clear:both;} 11 </style> 12 </head> 13 <body> 14 15 <div class="container"> 16 <div id="box1">box1 向左浮動</div> 17 <div id="box2">box2 向右浮動</div> 18 </div> 19 <div id="box3">box3</div> 20 </body>
[2]定位
分別分析一下position的幾個值
（1）static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。
（2）relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。（這里的占據文檔流指的是占據原來的位置，而不是占據相對定位后的位置。個人理解：相對定位后的元素則會疊加到新位置的上，覆蓋原先新位置上的元素，但是在新位置上不實際占據空間）如下圖所示，頭像相對定位前在box1盒子下方，頭像相對定位后，頭像原來的位置空着，但是下方的帶有文本的盒子並沒有移動上來。
這是相對定位的一個主要用法，圖文混排。
注意，標簽中設置了position:relative;屬性，不設置left，right和top，bottom的值，這些值則默認值為0。注意，即使不設置值同樣起到了相對定位作用，其子孫級別標簽使用position:absolute;時同樣會起到定位效果，position：relative的另一個主要用法：方便絕對定位元素找到參照物。
（3）絕對定位
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
絕對定位的層設好要參照位置的層后，就可以用TOP，LEFT這些來定位置了，如果它的上級或上上級都沒定位的話只就會根據BODY的位置來定位了,還有最后一點，絕對定位是不占位置的，它會像PS的圖層一樣單獨做一層，至於第幾層你可以通過z-index:這個屬性來設置。
另外要注意：僅使用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
效果圖：
（4）fix定位
元素框的表現類似於將 position 設置為 absolute，不過其包含塊是視窗本身。