本文是根據網上資料總結出來的文章

布局模型

在網頁中，元素有三種布局模型：
1、流動模型（Flow） 默認的
2、浮動模型 (Float)
3、層模型（Layer）

流動模型（Flow）

流動（Flow）模型是默認的網頁布局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。

流動布局模型具有2個比較典型的特征：

1.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%（水平方向會自動填滿外部的容器）。實際上，塊狀元素都會以行的形式占據位置。如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，實際內容區域會響應變窄。

（每一個便簽都顯示著自己本來默認的那個寬高）

第二點，在流動模型下，行內元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素這麽霸道獨占一行）

浮動模型 (Float)

任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動

div{float:left;}　　div{float:right;}

可以為不同的div設置不同的浮動方式來布局。

float的特性

float被設計出來的初衷是用於——文字環繞效果。

1.破壞性
float破壞了父標簽的原本結構，使得父標簽出現了坍塌現象。最根本原因在於：被設置了float的元素會脫離文檔流。
2.包裹性
普通的div如果沒有設置寬度，它會撐滿整個屏幕，如果給div增加float:left之後，它突然變得緊湊了，寬度發生了變化。其寬度會自動調整為包裹住內容寬度，而不是撐滿整個父容器。

清除浮動

1.為父元素添加overflow:hidden　　這樣父元素就有高度了 ，父元素的高度便不會被破壞；
2.浮動父元素
3.通過在所有浮動元素下方添加一個clear:both的元素，可以消除float的破壞性。
4.clearfix，給父元素添加。

.clearfix::before, .clear::after {
  content: '';
  display: table;
  clear: both;
  overflow: hidden;
  font-size: 0;
  height: 0;
}
.clearfix{
*zoom:1; // 兼容ie
}
 

層模型（Layer）

層模型有三種形式：

1、相對定位(position: relative)

1.相對於以前的位置移動，偏移前的位置保留不動。
2.在使用相對定位時，就算元素被偏移了，但是他仍然占據著它沒偏移前的空間。

2、絕對定位(position: absolute)

1.相對於瀏覽器窗口。被設置了絕對定位的元素，在文檔流中是不占據空間的，因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。
2.如果某元素設置了絕對定位，那麽它在文檔流中的位置會被刪除；我們可以通過z-index來設置它們的堆疊順序 。3.普通文檔流中元素的布局就當絕對定位的元素不存在時一樣，仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間。
4.浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並盡可能遠的移動至左側或者右側，文字內容會圍繞在浮動元素周圍。它只是改變了文檔流的顯示，而沒有脫離文檔流，理解了這一點，就很容易弄明白什麽時候用定位，什麽時候用浮動了。

3、固定定位(position: fixed)

1.相對移動的坐標是視圖（屏幕內的網頁窗口）本身。
2.由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。
3.相對定位可以和絕對定位混著使用 原則是：只要父div定義了定位屬性，子div就會跟著父div的位置去再定位

4、z-index

1.利用z-index，可以改變元素相互覆蓋的順序。
2.為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示一個元素在疊加順序上的上下立體關系。z-index值較大的元素將疊加在z-index值較小的元素之上。
2.對於未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下。
3.z-index屬性適用於定位元素（position屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直於顯示屏方向（稱為Z軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設置的z-index會是無效的。
4.如果父元素z-index有效，那麽子元素無論是否設置z-index都和父元素一致，會在父元素上方，雖然子元素設置z-index比父元素小，但是子元素仍然出現在父元素上方。
5.如果父元素z-index失效（未定位或者使用默認值），那麽定位子元素的z-index設置生效。
6.相同z-index，如果兩個元素都沒有設置z-index，使用默認值，一個定位一個沒有定位，那麽定位元素覆蓋未定位元素，如果兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index相同發生位置重合現象，那麽按文檔流順序，後面的覆蓋前面的。

CSS布局(一)