圣杯布局和双飞翼布局
1、上下高度固定，两侧宽度固定，中间宽高自适应
2、中间部分在DOM结构上优先，以便先行渲染
3、允许三列中的任意一列成为最高列
圣杯：
<divid="header"></div>
<divid="container">
<divid="center"class="column"></div>
<divid="left"class="column"></div>
<divid="right"class="column"></div>
</div>
<divid="footer"></div>
body{
min-width:550px;
}
#container{
padding-left:200px;
padding-right:150px;
}
#container.column{
float: left;
}
#center{
width:100%;
}
#left{
width:200px;
margin-left: -100%;
position: relative;
right:200px;
}
#right{
width:150px;
margin-right: -150px;
}
#footer{
clear: both;
}
双飞翼：
按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除：
<body>
<divid="header"></div>
<divid="container"class="column">
<divid="center"></div>
</div>
<divid="left"class="column"></div>
<divid="right"class="column"></div>
<divid="footer"></div><body>
body{
min-width:500px;
}
#container{
width:100%;
}
.column{
float: left;
}
#center{
margin-left:200px;
margin-right:150px;
}
#left{
width:200px;
margin-left: -100%;
}
#right{
width:150px;
margin-left: -150px;
}
#footer{
clear: both;
}
