圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
（小练习）
1.圣杯布局
html部分
<div id="content">
<div id="middle">17592rtweiurqtw7q6wer8qwe6r98w7e6r2834 2837r6qew8qrq831472</div>
<div id="left"></div>
<div id="right"></div>
</div>
css部分
content{
height:200px;
padding:0 200px;
}
middle{
width:100%;
height:200px;
float:left;
}
left{
position:relative;
width:200px;
height:200px;
float:left;
margin-left:-100%;
left:-200px;
}
right{
position:relative;
width:200px;
height:200px;
float:left;
margin-left:-200px;
right:-200px;
}
2.双飞翼
html
<div id="hd">header</div>
<div id="middle">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
css
hd{
height:50px;
background: #666;
text-align: center;
}
middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
//将文本放到id=inside的div中
inside{
margin:0 200px 0 180px;
height:100px;
}