圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。
解决方案大体相同，都是三栏全部 float:left 浮动，区别在于解决中间栏div的内容不被遮挡上。
圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话）。
双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
圣杯式布局https://blog.csdn.net/Night_Nine_Leaves/article/details/79660762
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.header {
height: 50px;
background: #eee;
text-align:center;
}
.body {
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
text-align:center;
padding:0 200px 0 100px;
height:100px;
}
.middle {
float:left;
100%;
height:100px;
background: #aaa;
}
.left {
float:left;
100px;
height:100px;
margin-left: -100%;
background: #0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-100px;
}
.right {
float:left;
200px;
height:100px;
margin-left: -200px;
background: #0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
.footer {
height: 50px;
background: #666;
text-align:center;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="body">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.header {
height: 50px;
background: #eee;
text-align:center;
}
.middle {
float: left;
100%;
height:100px;
background: blue;
}
.inside {
margin: 0 20px 0 180px;
height:100px;
}
.left {
float:left;
100px;
height:100px;
margin-left: -100%;
background: #0c9;
}
.right {
float:left;
200px;
height:100px;
margin-left: -200px;
background: #0c9;
}
.footer {
clear:both;
height: 50px;
background: #666;
text-align:center;
}
</style>
</head>
<body>
<!-- 双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。 -->
<div class="header">header</div>
<div class="middle">
<div class="inside">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
</html>