一、圣杯布局
主要html代码：
<body>
<div id="header"></div>
<div id="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
<div id="footer"></div>
</body>
主要步骤：
（1）main ,sub ,extra三个区块都设置左浮动，父元素清除浮动，main区块设置100%的宽度，sub和extra左右两区块需要定宽;
（2）sub区块设置margin-left ：-100%（父元素宽度的100%）,使其覆盖main区块的左边区域;
（3）extra区块设置margin-left ：负自身宽度,使其覆盖main区块的右边区域;
至此，浏览器中效果如下图：
左右侧边栏覆盖中间栏
（4）给三大块的父元素，也即
#container设置左右padding;
#container{
padding-left:210px;
padding-right:210px;
}
此时，浏览器中效果如下：
为左右侧边栏空出位置
（5）sub和extra区块设置相定位调整位置；
.sub{
position: relative;
left:-210px;
}
.extra{
position: relative;
right:-210px;
}
圣杯布局就完成啦~~
relative定位调整左右侧边栏位置
二、双飞翼布局
双飞翼布局的前三步和圣杯布局的前三步是一样的，只是对左右侧边栏覆盖中间栏时的处理方式不同。
圣杯布局是通过给三栏的父元素设置左右padding来实现，而双飞翼布局则是通过给中间栏添加子div,再给该div设置左右margin来实现，这样就不需要使用定位。
主要html代码：
具体步骤：
（1）（2）（3）步和圣杯布局一致，先实现下图效果。
左右侧边栏覆盖中间栏
（4）给inner-main区块设置左右margin,为了方便观察，这里填充了蓝色背景色。
.inner-main{
margin-left: 210px;
margin-right:210px;
height:100%;
}
双飞翼布局最终效果如下：
