双飞翼布局和圣杯布局

1.圣杯布局： 用到浮动，负边距，相对定位，不添加额外标签。

html部分：
<div class = "header"> header </div>
<div class = "bd">
<div class = "main" > main </div>
<div class = "left" > left </div>
<div class = "right" > right </div>
</div>
<div class = "footer"> footer </div>
css 部分
*{margin:0 auto};
.header,.footer{
width:100%;
background: #666;
height:30px;
clear:both;
}
.bd{
padding-left:150px;
padding-right:190px;
}
.left{
height:500px;
background:red;
width:150px;
float:left;
margin-left:-100%;
position:relative;
left:-150px;
}
.main{
height:500px;
background:blue;
width:100%;
float:left;
}
.right{
height:500px;
background:olive;
width:190px;
float:left;
margin-left:-190px;
position:relative;
right:-190px;
}

2.双飞翼布局：
在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后圣杯布局是有局限性的，而且宽度控制要改的地方很多，在淘宝ued讨论下，增加多一个div就可以使用相对布局，只用到了浮动和负边距。

html部分
<div class = "header" > header </div>
<div class = "bd" >
<div class = "main >
<div class = "inner" > main </div>
</div>
<div class = "left" > left </div>
<div class = "right" > right </div>
</div>
<div class = "footer" > footer </div>
css部分

*{margin:0 auto};
.header,.footer{
width:100%;
background:#008888;
height:100px;
clear:both;
}
.left{
height: 300px;
background:red;
width:150px;
float:left;
margin-left:-100%;
}
.main{
height:300px;
background:blue;
width:100%;
float:left;
}
.inner{
height:300px;
margin-left:150px;
margin-right:190px;
}
.right{
height:300px;
background:olvie;
width:190px;
float:left;
margin-left:-190px;
}