圣杯布局&雙飛翼布局
相同點(diǎn)：
1、功能相同，都是為了實(shí)現(xiàn)兩側(cè)寬度固定，中間寬度自適應(yīng)的三欄布局，中間內(nèi)容部分在HTML代碼中寫在最前邊，優(yōu)先加載渲染。
2、布局方式在實(shí)現(xiàn)上也有相同之處，都是讓三列浮動(dòng)，然后通過負(fù)外邊距形成三列布局。
不同點(diǎn)：解決中間部分被遮擋問題時(shí)采用的方法不同；圣杯布局是利用父容器的左、右內(nèi)邊距+列的相對(duì)定位;
雙飛翼布局是把主列嵌套在一個(gè)新的父級(jí)塊中并利用主列的左、右外邊距進(jìn)行布局調(diào)整。

雙飛布局實(shí)現(xiàn)<代碼已驗(yàn)證>
(雙飛小M ML為負(fù))
<div class="main column">
<div class="center">center</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>
div.main column>div.center
div.left column
div.right column
.main{
width:100%;
}
.column{
float:left;
}
.center{
margin-left:200px;
margin-right:300px;
}
.left{
width:200px;
position:relative;
magin-left:-100%;
}
.right{
width:300px;
margin-left:-300px;
}

圣杯布局實(shí)現(xiàn)<代碼已驗(yàn)證>
(P-大-圣 M全為負(fù) left 負(fù)寬)
<div class="main">
<div class="center column">center</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
.main{
padding-left:200px;
padding-right:300px;
}
.center{
width:100%;
}
.common{
float:left;
}
.left{
width:200px;
position:relative;
margin-left:-100%;
left:-200px;
}
.right{
width:300px;
margin-right:-300px;
}