在網頁中，元素有三種佈局模型：流動模型（Flow）、浮動模型(Float)、層模型(Layer)。

流動模型

流動模型是預設的網頁佈局模式。
具有兩個典型特徵：1、塊級元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊級元素的寬度都為100%。2、內聯元素都會在所處元素內從左到右水平分佈顯示

浮動模型

float：left;float:right;

層模型

層模型有三種形式：1、絕對定位（position：absolute）2、相對定位（position：relative）3、固定定位（position：fixed）
position：absolute

，絕對定位將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的具有定位屬性的父包含塊進行絕對定位，如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗
postion:relative,相對定位通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static（float）方式生成一個元素（並且元素像層一樣浮動起來），然後相對以前的位置移動，移動的方向和幅度有left、right、top、bottom屬性確定，偏移前的位置保留不動。參考案例
position：fixed，固定定位與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身，由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響，這與background-attachment:fixed屬性功能相同。

總結自幕課網html+css基礎課程