三欄布局：頁面分為左中右三部分。左右固定，中間部分自適應。
1. 絕對定位法
這里的絕對定位是指對左右部分進行絕對定位。
HTML結構。
| <div class="left">Left</div><div class="main">Main</div><div class="right">Right</div> |
代碼。
| //簡單的進行CSS resetbody,html{ height:100%; padding: 0px; margin:0px;}//左右絕對定位.left,.right{ position: absolute; top:0px; background: red; height:100%;}.left{ left:0; width:100px;}.right{ right:0; width:200px;}//中間使用margin空出左右元素所占據(jù)的空間.main{ margin:0px 200px 0px 100px; height:100%; background: blue;}// 上述的高度可以不必進行設置，用內容撐開元素高度即可。 |
height:100%
高度由內容撐開
這種方法有一個弊端，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發(fā)生層重疊的情況。
中間欄內嵌一個寬度為200的span元素，發(fā)生重疊
2. 圣杯布局
3. 雙飛翼布局
淺談css雙飛翼布局和圣杯布局
4. 自身浮動法
左欄左浮動，右欄右浮動，中間欄放最后
DOM結構
| <body> <div class="left"></div> <div class="right"></div> <div class="main"></div></body> |
樣式
| .left { background: red; float: left; width: 150px; } .right { background: red; float: right; width: 200px; } .main { background: pink; margin: 0 200px 0 150px; } |
效果
這種方式需要注意三個div的順序，左右兩欄的順序不分先后，但是中間一欄必須放在最后。
優(yōu)點是代碼足夠簡潔與高效，缺點是中間主體存在克星，即clear:both屬性。如果要使用此方法，需避免明顯的clear樣式，且主要內容無法最先加載，當頁面內容較多時會影響用戶體驗。
5. flex布局
DOM結構
| <div class="container"> <div class="left">Left</div> <div class="main">Main</div> <div class="right">Right</div></div> |
