布局模型是建立在盒模型基礎之上。

CSS包含三種基本布局模型

1. 流動模型（Flow）

2. 浮動模型（Float）

3. 層模型（Layer）

流動模型（Flow）

首先流動模型是默認的網頁布局模型.

塊狀元素都會在所處的包含元素內自上而下按順序垂直分布，在默認的情況下，塊狀元素的寬度為100%，所以都是占據一行的。

內聯元素都會在所處的包含元素內從左到右水平分布顯示

浮動模型（Float）

使用浮動模型可以使達到并排的效果。

任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。如下代碼可以實現兩個 div 元素一行顯示。

div{

width:200px;

height:200px;

border:2px red solid;

float:left; ? ? ? ? ? ? ? ? //靠左邊一行顯示

}效果如下：

還可以float:right，如果需要兩個元素一左一右的話，則分別設置 left與right

層模型（Layer）

讓html元素在網頁中精確定位，css定義了一組定位屬性來支持層布局模型。

1. 絕對定位（position：absolute）

2. 相對定位（position：relative）

3. 固定定位（position：fixed）

絕對定位

需要設置position:absolute來表示絕對定位，在配合left，right，top，bottom來定位，他需要父類塊進行參考，如果不存在這個，就相對于body元素，即瀏覽器窗口

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

效果如下：

層模型--------相對定位

想為元素設置層模型中的相對定位，需要設置position:relative,他是通過left，right.....來確定元素在正常文檔中的偏移位置，相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

層模型--------固定定位

fixed表示固定定位，他可以一直固定在瀏覽器的某個地方（無視瀏覽器大小的變化，哪怕向下滾動他還是固定在那里）幫助理解：比如說網頁中的廣告一直固定在右下角

右下角廣告固定：如下

#div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

position:fixed;

bottom:0;

right:0;

}

Relative和Absolute組合使用

要滿足以下條件：

1. 參照定位的元素必須是相對定位元素的前輩元素（父類元素）

2. 參照定位的元素必須加入position:relative

3. 定位元素加入absolute配合top等等