圣杯布局的来历是2006年发在a list part上的这篇文章：
In Search of the Holy Grail · An A List Apart Article
圣杯是西方表达“渴求之物"的意思，不是一种对页面的形象表达。
双飞翼据考源自淘宝UED，应该是一种页面的形象的表达。
圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
多
了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对
布局position:
relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个
属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。
简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“。
具体代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>圣杯、双飞翼</title>
<style type="text/css">
.warp
{
margin: 0;
padding: 0;
}
.box
{
width: 100%;
}
.mian
{
width: 100%;
background: #CCFFCC;
float: left;
}
.inner
{
margin: 0 200px 0 200px;
}
.sub
{
float: left;
width: 200px;
background: #DDDDDD;
margin-left: -100%;
}
.extra
{
width: 200px;
float: left;
background: #CCDD99;
margin-left: -200px;
}
.box2
{
padding-left: 200px;
padding-right: 200px;
}
.mian2
{
width: 100%;
background: #CCFFCC;
float: left;
}
.sub2
{
float: left;
width: 200px;
background: #DDDDDD;
margin-left: -100%;
position: relative;
left: -200px;
}
.extra2
{
width: 200px;
float: left;
background: #CCDD99;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="warp">
<h3>
双飞翼</h3>
<div class="box">
<div class="mian">
<div class="inner">
我是主流
</div>
</div>
<div class="sub">
我是左边
</div>
<div class="extra">
我是右边
</div>
</div>
<br />
<h3>
圣杯</h3>
<div class="box2">
<div class="mian2">
我是主流
</div>
<div class="sub2">
我是左边
</div>
<div class="extra2">
我是右边
</div>
</div>
</div>
</body>
</html>
运行结果：
aaarticlea/png;base64,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" alt="" />