经典三列布局，也叫做圣杯布局【holy grail of layouts】
kevin cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝ued的工程师传播开来，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的div标签；
5、要求用最简单的css、最少的hack语句；
1.圣杯布局：
doctype html>html>head> meta charset=utf-8> meta http-equiv=x-ua-compatible content=ie=edge,chrome=1> title>圣杯布局title> style type=text/css> body {background-color: #ffffff; font-size:14px;} #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;} .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;} .main {background-color: #03a9f4; color:#ffffff;} .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;} p {margin:0; padding:20px; text-align: center;} /* 左侧栏固定宽度，右侧自适应 */ .bd-lft { zoom:1; overflow:hidden; padding-left:210px; } .bd-lft .aside { float:left; width:200px; margin-left:-100%; /*= -100%*/ position:relative; left:-210px; /* = -parantnode.paddingleft */ _left: 0; /*ie6 hack*/ } .bd-lft .main { float:left; width:100%; } /* 右侧栏固定宽度，左侧自适应 */ .bd-rgt { zoom:1; overflow:hidden; padding-right:210px; } .bd-rgt .aside { float:left; width:200px; margin-left:-200px; /* = -this.width */ position:relative; right:-210px; /* = -parantnode.paddingright */ } .bd-rgt .main { float:left; width:100%; } /* 左中右 三栏自适应 */ .bd-3-lr { zoom:1; overflow:hidden; padding-left:210px; padding-right:210px; } .bd-3-lr .main { float:left; width:100%; } .bd-3-lr .aside-1 { float: left; width:200px; margin-left: -100%; position:relative; left: -210px; _left: 210px; /*ie6 hack*/ } .bd-3-lr .aside-2 { float: left; width:200px; margin-left: -200px; position:relative; right: -210px; } /* 都在左边，右侧自适应 */ .bd-3-ll { zoom:1; overflow:hidden; padding-left:420px; } .bd-3-ll .main { float:left; width:100%; } .bd-3-ll .aside-1 { float: left; width:200px; margin-left: -100%; position:relative; left: -420px; _left: 0px; /*ie6 hack*/ } .bd-3-ll .aside-2 { float: left; width:200px; margin-left: -100%; position:relative; left: -210px; _left: 210px; /*ie6 hack*/ } /* 都在右边，左侧自适应 */ .bd-3-rr { zoom:1; overflow:hidden; padding-right:420px; } .bd-3-rr .main { float:left; width:100%; } .bd-3-rr .aside-1 { float: left; width:200px; margin-left: -200px; position:relative; right: -210px; } .bd-3-rr .aside-2 { float: left; width:200px; margin-left: -200px; position:relative; right: -420px; } style>head>body> div id=hd>头部div> div class=bd-lft> div class=main> p>主内容栏自适应宽度p> div> div class=aside> p>侧边栏固定宽度p> div> div> div class=bd-rgt> div class=main> p>主内容栏自适应宽度p> div> div class=aside> p>侧边栏固定宽度p> div> div> div class=bd-3-lr> div class=main> p>主内容栏自适应宽度p> div> div class=aside-1> p>侧边栏1固定宽度p> div> div class=aside-2> p>侧边栏2固定宽度p> div> div> div class=bd-3-ll> div class=main> p>主内容栏自适应宽度p> div> div class=aside-1> p>侧边栏1固定宽度p> div> div class=aside-2> p>侧边栏2固定宽度p> div> div> div class=bd-3-rr> div class=main> p>主内容栏自适应宽度p> div> div class=aside-1> p>侧边栏1固定宽度p> div> div class=aside-2> p>侧边栏2固定宽度p> div> div> div id=ft>底部div>body>html>
执行效果：
2.双飞翼布局
在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？
在淘宝ued探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。
doctype html>html>head> meta charset=utf-8 /> title>双飞翼布局title> style> body{padding:0;margin:0} .header,.footer{width:100%; background: #666;height:30px;clear:both;} .bd{ /*padding-left:150px;*/ /*padding-right:190px;*/ } .left{ background: #e79f6d