CSS包含3種基本的佈局模型，分別是：

1.流動模型（Flow）

2.浮動模型 （Float）

3.層模型   (Layer)

我們先來說說流動模型，流動（Flow）是預設的網頁佈局模式。也就是說網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。

流動佈局模型具有2個比較典型的特徵：

第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。如右側程式碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示為100%。

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

執行結果如下：

在該例子中，我們沒有對html程式碼做什麼佈局，由執行結果可以看到，在預設情況下，網頁佈局採用的是流動模型，對於塊級元素會佔據一行，對於內聯元素會從左至右顯示。