在網頁中，元素有三種布局模型
文件流（flow）
層模型（layer）
浮動模型（float）
1、文件流
特點：預設網頁布局模型，塊元素自上而下按順序垂直分布（獨佔一行），行內元素從左到右水平分布顯示。
2、層模型
特點：三種形式 1， 相對定位（position：relative） 2，絕對定位（position：absolute）3，固定定位（position：fixed）
3、浮動模型
特點：float設定不同浮動的效果（right，left）
深入了解：
相對定位
設定position：relative表示相對定位，沒有脫離文件流。通過left，right，top，bottom屬性確定元素在正常文件流中偏離的位置，相對於元素初始的位置移動，偏移前的位置保留不動。就算元素被偏移了，但是他仍然佔據著他沒有偏移的空間。
絕對定位
設定position:absolute表示絕對定位，脫離文件流。通過left，right，top，bottom屬性相對於最近的乙個具有定位的父級進行定位，如果沒有則相對於文件定位。
固定定位
fixed表示固定定位，相對於檢視定位，他不會隨瀏覽器視窗的滾動條滾動而變化，不會受文件流的影響。
z-index
z-index屬性適用於定位元素（position屬性值為relative、absolute 或fixed，如果元素沒有定位，對其設定z-index是無效的）為了表示三維立體的概念如顯示元素的上下層的疊加順序而引入了z-index屬性來表示z軸的區別。z-index值較大的元素疊加在z-index值較小的上面。對於未指定此屬性的定位物件，z-index值為正數第物件在其之上，而為負數的物件在下面。
浮動元素
浮動元素的定位還是基於文件流定位的，只是改變了文件流的顯示，並沒有脫離文件流。
所有產生了浮動流的元素塊級元素都看不到他們。文字屬性（inline）元素以及文字元素和產生了bfc的元素可以看得到浮動元素。
案例1：父級自適應包住子級（子級是浮動元素）23
方法二：清除浮動流。
偽元素清除浮動
.img{
float: left;
margin-right: 10px;
三種布局模型和輪播
css布局模型 三種 1 流動模型 flow 預設的網頁布局模式，塊狀元素都自上而下按順序垂直延伸分布。內聯元素都會在所處的包含元素內從左到右水平分布顯示 2 浮動模型 float float left 3 層模型 layer 三種 1絕對定位 position absolute 2 相對定位 po...
CSS的三種布局模式
css常見的三種布局模式有 流動模型 flow 浮動模型 float 層模型 layer 1 塊狀元素自上而下占行 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100 實際上，塊狀元素都會以行的形式佔據位置。2 行內元素從左到右 在流動模型下，內聯元...
三種方法實現CSS三欄布局
本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 doctype html en utf 8 css實現三欄布局1 title text css body left middle ri...