float屬性
先來了解一下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脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)
浮動的表現
定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（注意這里是塊框而不是內聯元素；浮動框只對它后面的元素造成影響）
注意 當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。
現象1:
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標准流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。
現象2:
(1)左右結構div盒子重疊現象，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會照成覆蓋現象，只有DIV形成覆蓋現象。
解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。
(2)上下結構div盒子重疊現象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:300px; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:right;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } </style> </head> <body> <div class="container"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> </div> <div id="box3">box3</div> </body> </body> </html>
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
解決方法：
1、要么給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。
2、要么清除浮動。
清除浮動：
在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
clear語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。
方式1(推薦):
.clearfix:after { <----在類名為“clearfix”的元素內最后面加入內容；
content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。
display: block; <----加入的這個元素轉換為塊級元素。
clear: both; <----清除左右兩邊浮動。
visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已；
line-height: 0; <----行高為0；
height: 0; <----高度為0；
font-size:0; <----字體大小為0；
}
.clearfix { *zoom:1;} <----這是針對於IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。
整段代碼就相當於在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。
之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。
話說回來，你這段代碼真是個累贅啊，這樣寫不利於維護。
只要寫一個.clearfix就行了，然后在需要清浮動的元素中 添加clearfix類名就好了。
如：
<div class="head clearfix"></div>
方式2：
overflow:hidden;
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
10 position(定位)
1 static
static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。
2 position: relative／absolute
relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute 絕對定位。
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
3 position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
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
效果圖：
