作用：
圣杯布局和双飞翼布局解决的问题都是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要放在文件流前面以优先渲染。
区别:
圣杯布局三栏利用 float 和 负margin 并列
利用父容器设置 padding 给两边侧栏腾空间
<body>
<div id = "father">
<div id="main">
<p>this is main</p>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
<style>
#father {
padding: 0 60px 0 30px;
margin: 0;
float: left;
}
#main {
width: 100%;
height: 300px;
background: red;
}
#left {
width: 30px;
margin-left: -100%;
background: blue;
height: 100px;
position: relative;
right: 30px;
}
#right {
width: 60px;
margin-left: -60px;
background: yellow;
height: 200px;
position: relative;
left: 60px;
}
</style>
双飞翼布局三栏利用 float 和 负margin 并列
在中间栏加一层容器，利用 margin 给两栏腾空间
<body>
<div id = "father">
<div id = "container">
<div id="main">
<p>this is main</p>
</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
<style>
#father {
padding: 0;
margin: 0;
min-width: 630px;
float: left;
}
#container {
width: 100%;
}
#container #main {
height: 300px;
background: red;
margin: 0 600px 0 30px;
}
#left {
width: 30px;
background: blue;
height: 100px;
margin-left: -100%;
}
#right {
width: 600px;
background: yellow;
height: 200px;
margin-left: -600px;
}
</style>
