圣杯布局&双飞翼布局
相同点：
1、功能相同，都是为了实现两侧宽度固定，中间宽度自适应的三栏布局，中间内容部分在HTML代码中写在最前边，优先加载渲染。
2、布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
不同点：解决中间部分被遮挡问题时采用的方法不同；圣杯布局是利用父容器的左、右内边距+列的相对定位;
双飞翼布局是把主列嵌套在一个新的父级块中并利用主列的左、右外边距进行布局调整。
双飞布局实现<代码已验证>
(双飞小M ML为负)
<div class="main column">
<div class="center">center</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>
div.main column>div.center
div.left column
div.right column
.main{
width:100%;
}
.column{
float:left;
}
.center{
margin-left:200px;
margin-right:300px;
}
.left{
width:200px;
position:relative;
magin-left:-100%;
}
.right{
width:300px;
margin-left:-300px;
}
圣杯布局实现<代码已验证>
(P-大-圣 M全为负 left 负宽)
<div class="main">
<div class="center column">center</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
.main{
padding-left:200px;
padding-right:300px;
}
.center{
width:100%;
}
.common{
float:left;
}
.left{
width:200px;
position:relative;
margin-left:-100%;
left:-200px;
}
.right{
width:300px;
margin-right:-300px;
}
