css包含3種基本的佈局模型即為元素的3中佈局模型,分別為 Flow/Float/Layer
Flow(流動模型)
標準文件流方式，元素從上至下，從左至右！是預設的網頁佈局方式
特點
- 塊狀元素佔據單獨的一行，從上至下排列
- 內聯元素會從左至右排列
Float(浮動模型)
網頁元素可通過設定float屬性值浮動，利用浮動特性佈局
Layer(層模型)
設定網頁元素position來支援層佈局模型
position: static
position 預設值,網頁元素仍然處於標準文件流中,佔據文件流中的位置
position: relative
特點：
- 相對於自身原有位置進行偏移
- 仍然處於標準文件流中
- 隨即擁有偏移屬性和z-index 屬性
position: absolute
特點：
- 建立了以包含塊為基準的定位（包含塊為距離其最近設定了定位屬性的上級元素,
若無定位祖先元素，則以HTML元素為定位元素）
- 完全脫離了標準文件流
- 隨即擁有偏移屬性和 z-index 屬性
- 未設定偏移量時，無論是否存在已定位祖先元素，都保持在元素初始位置
position: fixed
特點：
- 完全脫離標準文件流
- 隨機擁有偏移屬性和 z-index 屬性
- 無論有無已定位祖先元素，均以瀏覽器視窗為偏移參照基準
- 位置固定，不會隨滾動條變化
- 未設定偏移量時，仍然在標準文件流原位置