一劳殖、圣杯布局
主要html代碼：
<body>
<div id="header"></div>
<div id="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
<div id="footer"></div>
</body>
主要步驟：
（1）main ,sub ,extra三個區(qū)塊都設置左浮動息裸，父元素清除浮動，main區(qū)塊設置100%的寬度然遏，sub和extra左右兩區(qū)塊需要定寬;
（2）sub區(qū)塊設置margin-left ：-100%（父元素寬度的100%）,使其覆蓋main區(qū)塊的左邊區(qū)域;
（3）extra區(qū)塊設置margin-left ：負自身寬度,使其覆蓋main區(qū)塊的右邊區(qū)域;
至此扮超，瀏覽器中效果如下圖：
左右側(cè)邊欄覆蓋中間欄
（4）給三大塊的父元素取刃，也即
#container設置左右padding;
#container{
padding-left:210px;
padding-right:210px;
}
此時蹋肮，瀏覽器中效果如下：
為左右側(cè)邊欄空出位置
（5）sub和extra區(qū)塊設置相定位調(diào)整位置；
.sub{
position: relative;
left:-210px;
}
.extra{
position: relative;
right:-210px;
}
圣杯布局就完成啦~~
relative定位調(diào)整左右側(cè)邊欄位置
二璧疗、雙飛翼布局
雙飛翼布局的前三步和圣杯布局的前三步是一樣的括尸，只是對左右側(cè)邊欄覆蓋中間欄時的處理方式不同。
圣杯布局是通過給三欄的父元素設置左右padding來實現(xiàn)病毡，而雙飛翼布局則是通過給中間欄添加子div,再給該div設置左右margin來實現(xiàn)，這樣就不需要使用定位屁柏。
主要html代碼：
具體步驟：
（1）（2）（3）步和圣杯布局一致啦膜，先實現(xiàn)下圖效果。
左右側(cè)邊欄覆蓋中間欄
（4）給inner-main區(qū)塊設置左右margin,為了方便觀察淌喻，這里填充了藍色背景色僧家。
.inner-main{
margin-left: 210px;
margin-right:210px;
height:100%;
}
雙飛翼布局最終效果如下：
