CSS 3-浮動、定位

文檔流

文檔流是一種默認定位方式，在文檔流中元素框的位置由元素在html中的位置決定，文檔流中元素的position屬性爲默認的static或繼承來的static並按照普通流定位。塊級元素獨佔一行，自上而下排列；內聯元素從左到右排列。
讓元素脫離文檔流有三種方法：
浮動float;
絕對定位position:absolute;
固定定位position:fixed;
元素脫離文檔流demo

---

CSS定位

CSS的三種佈局機制：文檔流、浮動、定位。定位定義元素相對於它正常位置應該出現的位置，或者相對於父元素、另外一個元素、瀏覽器自己偏移。定位方式有三種：

div{
 position:absolute/relative/fixed
}

1.position:fixed相對於瀏覽器的窗口定位，定位後的元素脫離文檔流。元素的位置經過 left,top,right以及bottom屬性進行規定。fixed永遠是根據瀏覽器窗口來定位，不管其餘元素怎麼設置，都影響不了它。
2.position:relative相對於元素自身正常位置進行定位,元素在文檔流中仍佔據原來空間，只是表現出來的位置會相對原來的位置偏移。left:20會向元素的 LEFT 位置添加 20 像素。
3.position:absolute,相對於有定位屬性（fix/relative/absolute，通常是用relative）的第一個父元素偏移,若是找不到這種父元素就向上層找，直到body，html元素。absolute定位元素會脫離文檔流。元素的位置經過 left,top,right以及bottom屬性進行規定。
定位方式demo

---

absolute, relative, fixed 偏移的參考點

1.absolute的定位：瀏覽器會遞歸查找該元素的全部父元素，若是找到一個設置了position:relative/absolute/fixed的元素，就以該元素爲基準定位，若是沒找到，就以瀏覽器邊界定位。通常狀況下，咱們會將relative與absolute配套使用，方便咱們對absolute元素定位。

2.relative的定位：relative元素的定位永遠是相對於元素自身位置的，和其餘元素不要緊，也不會影響其餘元素。

3.fixed的定位：fixed元素的定位永遠是相對於瀏覽器邊界的，和其餘元素沒有關係。

---

z-index

具備定位屬性的元素設置top,right,bottom,left，z-index纔有效。
z-index（設置層疊）,能夠經過z-index屬性控制元素在Z軸方向的疊放順序，z-index越高，元素位置越靠上，若是爲正數，則離用戶更近，爲負數則表示離用戶更遠。沒定位屬性的元素設置了無效果。若是2個元素的z-index的值相同，按文檔流順序，後面的元素會懸浮在前面的元素上面。
z-index demo

---

position:relative和負margin使元素位置發生偏移的區別

position：relative可使元素相對於元素自身正常位置發生偏移，有relative定位屬性的元素仍然在文檔流中，它仍然佔據着原來的位置，因此其餘元素的位置不會發生變化。
負margin：經過負margin進行偏移的元素，它會放棄偏移前佔據的空間，這樣它後面文檔流中的其它元素就會「流」過來填充這部分空間，因此其餘元素的位置發生了變化。
relativ,負margin偏移區別 demo

---

局對居中

將目標元素的父元素設置absolute定位，四方向偏移值設置爲0。再將目標元素設置absolute定位，上、左方向設置偏移值爲50%（這裏50%是相對於父元素），讓元素的左上角原點位於頁面的中心。再使用負margin使元素左上角沿左、上移動它寬高的一半，這樣就能使元素在頁面中垂直居中了。
demo

---

浮動元素的特徵。

float的設計初衷是用於文字環繞效果，即對一個圖片使用float以後，周圍的文字環繞它。
1.float使元素脫離文檔流，當父元素沒設置固定高度時，元素浮動脫離文檔流，父元素會收縮
2.元素設置浮動或絕對定位後，若是不給元素設置寬度，元素具備收縮性，元素會根據內容自動調整寬度。也就是說absolute、float具備自適應寬度的特性。
3.行內元素、塊級元素浮動後都會變成塊級元素。元素使用絕對定位後也會成塊級元素
4.浮動的元素能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動元素會脫離文檔流，其餘的普通元素會忽視浮動元素，後面的元素會佔據浮動元素的文檔流空間。
元素浮動的時候只能向左，或向右，不會向上，向下浮動。浮動的元素是先站住本身所在文檔流的位置，而後左右浮動。元素浮動後緊跟的內聯元素會貼住浮動的元素(圖文環繞)，文字會圍繞着浮動元素，這也是設計浮動元素的初衷。
浮動demo

---

清除浮動

元素浮動後，父元素沒法撐起高度（父元素未指定高度時），影響與父元素同級的元素。與浮動元素同級的非浮動元素會緊隨其後視浮動元素不存在，佔據浮動元素原來的位置。若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響佈局。demo1.元素加clear:left/right/both; 可清除該元素前面有浮動元素產生的反作用。元素浮動後誰受影響，clear就加給誰。2.浮動元素包裹父元素（或直接設置父元素），設置寬度100%，設置overflow：hidden3.浮動元素包裹父元素（或直接設置父元素），設置父元素after僞元素爲block，再設置僞元素clear:both;