方法一：浮動布局
**： width:100%;
height:100px;
}float:left;
width:300px;
background:red;
height:100px;
}float:right;
background:blue;
width:300px;
height:100px;
}background:yellow;
height:100px;
}浮動布局
大家可以看下面這張
出現這個現象的原因是：（center其實是佔據了整行）
浮動元素脫離了文件流，與塊級元素傳送了重疊，其邊框和背景在該浮動元素下面顯示，但是內容在浮動元素上面顯示。（如果是行內元素則都會出現先浮動元素之上）
這裡還需要注意一下，center必須放在最後乙個。
如果你把center放在中間就會出現下面這個情況：
如圖所示，「右布局」跑到了下一行.
這是因為渲染順序的導致中間塊先進行了渲染，當「右布局」再次渲染的時候不能影響前面的渲染（中間布局是塊級元素，若換成行內元素則不會出現此顯示），所以「右布局」浮動到了另一行
浮動布局的方法雖然簡單，但是問題也不少，清楚浮動就不用多說。
當頁面縮小過多的時候，由於寬度不足，浮動元素會自動換行。
這種情況下，浮動布局和絕對布局都會有這樣的問題。
方法二：絕對布局
**： width:100%;
height:100px;
margin-top:10px;
}position:absolute;
left:0;
width:300px;
background:red;
height:100px;
}position:absolute;
right:0;
background:blue;
width:300px;
height:100px;
}position:absolute;
background:yellow;
left:300px;
right:300px;
height:100px;
}絕對布局
方案三：flex布局（彈性盒模型布局）
**： display:flex;
height:100px;
margin-top:10px;
}width:300px;
background:red;
}width:300px;
background:blue;
}flex:1;//讓所有彈性盒模型物件的子元素都有相同的長度，忽略它們內部的內容：
background:yellow;
}flex布局
方案四：**布局
**: display:table;
height:100px;
width:100%;
}display:table-cell;
width:300px;
background:red;
}display:table-cell;
background:blue;
width:300px;
}display:table-cell;
background:yellow;
}float布局
方案五：gird布局（網格布局）
注意：我是在chrome上實現的，如果沒有效果的話，在chrome瀏覽器中輸入chrome://flags/，進入乙個設定頁面，開啟此應用。
}網格布局
效果圖：
頁面布局方法之三欄布局
題目 完成左中右三欄布局，高度100px，左右寬度200px，中間寬度自適應。今天學習了關於三欄布局的五種方法，其中最常用的就是flex伸縮布局，其他的布局方法雖然也可以實現同樣的效果，但是或多或少有些缺點，但是本著多學點總是沒錯的精神，還是都了解一下。float浮動布局的優點是相容性比較好，但是其...
CSS布局 三欄布局
題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...
CSS布局 三欄布局
css布局技術可謂是前端技術中最基礎的技術，就是因為基礎，所以我認為要更加熟練，深入的去掌握，去梳理。採用浮動實現的三欄布局有以下特點及注意事項 注意dom結構的排列順序。因為左右兩側的dom都是浮動布局，而中間的dom則是普通的文件流，所以為了規避瀏覽器正常的頁面渲染，即先解析左側dom 浮動 再...