CSS圣杯布局 && 双飞翼布局
两者作用和区别：
圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度，中间自适应的三栏布局，已经由此演变出来的类似其他布局格式。中间布局代码要写在 前边，保证第一个渲染
区别：
两者在布局的前三点方法是一样的，通过float浮动，和margin-left负值，让三元素并排显示。行成三栏布局，区别在中间盒子处理的方式。怎么做才能不把中间盒子的内容覆盖住。让其完全显示。
圣杯布局是通过父元素设置padding-left和padding-right为左右两边的盒子留空间。然后左右两盒子通过相对定位，改变left和right的值。移动后不遮挡中间div
双飞翼布局是直接在中间div内部创建子div，用于放置内容。并且设置子div的margin-left和margin-right,为左右两个div留出位置，左右两个盒子不需要设置position:relative和right,left属性。个人感觉比圣杯布局要简单一些。具体操作参考下面代码
1，圣杯布局特点
（1）父元素包含三个元素，分别设置他们左浮动
（2）中间的盒子宽度设置为100%，自适应，并且在三个元素的最前面显示，第一个渲染
（3）左右两边使用margin-left的负值，使他们与中间的盒子同行，（左边：-100%，右边：-右边盒子的宽度）
（4）中间的盒子width:100%后，需要父元素通过padding设置左右两边空白，为左右两边的盒子留同等大小的空间
（5）设置左右两边position:relative,通过left移动位置
2，代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.container {
height: 400px;
padding:0 200px;
overflow: hidden;
}
.middle {
width:100%;
height: 400px;
line-height: 400px;
float: left;
text-align: center;
background-color: #eeeeee;
}
.left {
position: relative;
width:200px;
height: 400px;
text-align: center;
line-height: 400px;
float: left;
margin-left: -100%;
left: -200px;
background-color: red;
}
.right {
position: relative;
width:200px;
height:400px;
text-align: center;
line-height: 400px;
float: left;
margin-left: -200px;
right: -200px;
background-color: green;
}
header, footer {
width:100%
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid deeppink;
background: pink;
}
</style>
</head>
<body>
<header>上</header>
<div class="container">
<div class="middle">中</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<footer>下</footer>
</body>
</html>
效果截图
3，双飞翼布局：
（1）（2）（3）同上
（4）给中间元素设置子元素，并给其设置其margin-left 和 margin-right值，为左右盒子留位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
height: 400px;
overflow: hidden;
}
.middle {
width: 100%;
height: 400px;
line-height: 400px;
float: left;
text-align: center;
background-color: #eeeeee;
}
.middle > div {
margin: 0 200px;
background-color: #eeeeee;
}
.left {
width:200px;
height: 400px;
text-align: center;
line-height: 400px;
float: left;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 400px;
text-align: center;
line-height: 400px;
float: left;
margin-left: -200px;
background-color: green;
}
header,footer {
width:100%
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid deeppink;
background: pink;
}
</style>
</head>
<body>
<header>Header</header>
<div class="container">
<div class="middle">
<div>我是中间</div>
</div>
<div class="left">我是左边</div>
<div class="right">我是右边</div>
</div>
<footer>Footer</footer>
</body>
</html>