经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；
思路步骤：（按照外层div.main，左侧div.left，内容部分div.content构思）
1、外层.main不设置宽度，自适应100%，此时设置padding=200px则不会影响总体宽度，此时可以让content被挤到200px的位置，这就确定了content所处的位置
2、左侧left的html代码要在content代码之后写（便于后面使用相对定位和负值margin来定位）
3、content设置：
content宽度设置为100%，由于main的padding-left的设置，content就只能在距离浏览器200px的位置。
设置content左浮动float：left，让content紧贴main的最左边。
4、left设置：
left设置左浮动float：left，由于content的宽度设置，left势必被挤到换行
然后设置margin-left：-100%，结合上面的左浮动，left会回到main的最左边，此时距离浏览器边缘还有padding设置的200px。
这时候设置left相对定位position：relative，然后设置其left值为-200px；这时候的left就能被定位到最左边了。
疑问：为什么不能使用position:absolute呢？
答案：
绝对定位的参照物是最近的一个有定位的div，如果没有则直接以body为参照物，所以如果外层main没有定位设置，那就比较麻烦了。
相对定位的参照标准是元素当前位置，不会依托于别的div，所以比绝对定位更好。
建议：深刻理解一下相对定位和绝对定位的知识点。
代码及注释如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 list-style: none; 11 color: #fff; 12 } 13 body,html{ 14 height: 100%; 15 } 16 /* 17 外层div不设置宽度，自适应100%，此时设置padding=200px则不会影响总体宽度 18 此时可以让content被挤到200px的位置，这就确定了content所处的位置 19 */ 20 .main{ 21 background: #000; 22 height: 100%; 23 padding-left:200px; 24 } 25 /* 26 content宽度设置为100%，由于main的padding-left的设置，content就只能在距离浏览器200px的位置。 27 设置content左浮动float：left，让content紧贴main的最左边。 28 */ 29 .content{ 30 height: 100%; 31 background: red; 32 float: left; 33 width: 100%; 34 } 35 /* 36 left设置左浮动float：left，由于content的宽度设置，left势必被挤到换行 37 然后设置margin-left：-100%，结合上面的左浮动，left会回到main的最左边，此时距离浏览器边缘还有padding设置的200px。 38 这时候设置left相对定位position：relative，然后设置其left值为-200px；这时候的left就能被定位到最左边了。 39 疑问：为什么不能使用position:absolute呢？ 40 答案： 41 绝对定位的参照物是最近的一个有定位的div，如果没有则直接以body为参照物，所以如果外层main没有定位设置，那就比较麻烦了。 42 相对定位的参照标准是元素当前位置，不会依托于别的div，所以比绝对定位更好。 43 */ 44 .left{ 45 width: 200px; 46 height: 100%; 47 margin-left: -100%; 48 background: blue; 49 position: relative; 50 float: left; 51 left: -200px; 52 _left: 0; /*IE6 hack*/ 53 } 54 </style> 55 </head> 56 <body> 57 <div class="main"> 58 <div class="content"> 59 1.这是测试的内容<br /> 60 2.这是测试的内容<br /> 61 3.这是测试的内容<br /> 62 4.这是测试的内容<br /> 63 5.这是测试的内容<br /> 64 6.这是测试的内容<br /> 65 7.这是测试的内容<br /> 66 8.这是测试的内容<br /> 67 9.这是测试的内容<br /> 68 10.这是测试的内容<br /> 69 </div> 70 <div class="left"> 71 72 </div> 73 </div> 74 </body> 75 </html>