HTML中元素有三種佈局模型：流動模型、浮動模型、層模型。

流動模型（flow）

HTML網頁預設佈局就是流動模型，佈局如下：

塊級元素(block)自上而下垂直分佈，因為塊級元素預設寬度為瀏覽器視窗的100%，或者理解為每個塊級元素預設佔一行。常見塊級元素有 div, p, h 等；

內聯元素(inline)從左到右水平分佈，即不像塊級元素那樣每個獨佔一行。常見內聯元素有 a, span, em 等。

浮動模型（float）

上面提到的塊級元素是每個獨佔一行顯示，但是定義css浮動模型後就能使兩個塊級元素並排一行顯示。
例如HTML程式碼：

<div id = "div1
 
">
    <p>Hello</p>
</div>
<div id = "div2">
    <p>World !</p>
</div>

顯示結果是這樣：

Hello
World !

但是設定浮動css後：

div {
float: left;
}

效果就是這樣：

HelloWorld !

也可以設定元素一左一右顯示：

#div1 {
float: left;
}

#div2 {
float: right;
}

層模型（layer）（position）

類似於PS中的圖層

絕對定位

理解就是字面上的意思，簡言之就是相對於上級設定了 position 屬性的元素進行定位，如果沒有這類上級就是相對於 body 標籤，也是瀏覽器視窗。需要設定css：position: absolute;，然後就可以使用 top, right, bottom, left 這類屬性進行定位。例如：

div {
position: absolute;
top: 100px;
left: 150px;
}

這樣就使板塊向下移動100畫素，向右

相對定位

這裡的相對較難理解，與數理中的“相對”不太一樣，這裡是“相對於自己原來應在的位置”，需要設定css：position: relative;，重要的是不用關心上級是否設定了position屬性，這樣就很方便。例如：

div {
position: relative;
top: 100px;
right: 100px;
}

板塊就相對於自己沒設定樣式前的位置，同時向左向下移動100px。

固定定位

這個就好理解了，所謂固定就是指固定於整個瀏覽器網頁視窗不動，即使滾動網頁內容也不改變位置，需要設定css：position: fixed，也可以設定 top, right等調整固定的位置。還記得瀏覽器某些網頁右下角的小廣告嗎，是不是固定在那怎麼瀏覽網頁都不動 -_- .