CSS_圣杯布局和双飞翼布局
参考：
圣杯布局的来历是2006年发在a list part上的这篇文章：
http://alistapart.com/article/holygrail
双飞翼布局介绍-始于淘宝UED：
http://www.imooc.com/wenda/detail/254035
博客：http://www.cnblogs.com/imwtr/p/4441741.html
理解：
圣杯布局和双飞翼布局均可以实现一个三栏布局：中间栏先加载，然后是左栏，右栏；左右两栏宽度固定，中间栏宽度自适应（会根据浏览器的窗口的大小而变化。）
圣杯布局实现原理：
（1）定义一个div，class为container容器，包含以下三个div，分别表示main（中间栏），left（左栏），right（右栏），注意：div的顺序分别是main，left，right，因为根据HTML文档的加载原理，写在前面的先加载到，所以要把main写在最前面。
（2）让main ，left， right都左浮动。
（2）定义高度。
（3）定义宽度：main为100%，left和right可以为一个固定的宽度，eg：300px；
（4）由于main的宽度有100%，所以会left和right会被挤到下面。
此时需要定义左栏left浮动到最左边：margin-left : -100%；同理定义右栏浮动到最右边：margin-left：-300px；
（5）通过以上四步，实现了三栏，中间自适应布局，但是由于main的宽度是100%，此时main中的内容是会被left和right遮挡住的。
因此需要为container容器定义padding-left和padding-right，宽度分别为left和right的宽度，但是这样会导致left和right也会更着过来，不再是在浏览器窗口的最左端和最右端，如下图所示：（红色画圈部分为设置的padding，这里还是会遮挡住main的内容。）
（6）对left和right进行相对定位：分别是：left：-300px；right：-300px；使其回到浏览器的最左端和最右端。自此，完成，main的内容也不会被遮挡了。
1.圣杯布局（完整代码）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圣杯布局</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 body{ 12 min-width: 700px; 13 } 14 .clearfloat:after{ 15 display: block; 16 clear:both; 17 content: ""; 18 visibility: hidden; 19 height: 0; 20 } 21 .container{ 22 overflow: hidden; 23 padding: 0 300px; 24 } 25 .col{ 26 position: relative; 27 height: 700px; 28 float: left; 29 color: #fff; 30 } 31 .left,.right{ 32 width: 300px; 33 background-color: #3b3b3b; 34 } 35 .main{ 36 width: 100%; 37 background-color: #b3b3b3; 38 } 39 .left{ 40 margin-left: -100%; 41 left: -300px; 42 } 43 .right{ 44 margin-left:-300px; 45 right: -300px; 46 } 47 48 49 </style> 50 </head> 51 <body> 52 <div class="container .clearfloat"> 53 <div class="main col">main</div> 54 <div class="left col">left</div> 55 <div class="right col">right</div> 56 </div> 57 </body> 58 </html>
双飞翼布局实现原理：
双飞翼布局的前四步和圣杯布局是相同的，只是在处理main内容被遮挡的方法不同：双飞翼布局采用的方法是为main加一个div的遮罩，为这个遮罩设置margin-left和margin-right，左栏和和右栏宽度都为300px的div，遮罩可以这样设置：margin：0 300px;
2.双飞翼布局（完整代码）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>双飞翼</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 body{ 12 min-width: 700px; 13 } 14 .clearfloat:after{ 15 display: block; 16 clear:both; 17 content: ""; 18 visibility: hidden; 19 height: 0; 20 } 21 .col{ 22 height: 700px; 23 float: left; 24 color: #fff; 25 } 26 .left,.right{ 27 width: 300px; 28 background-color: #3b3b3b; 29 } 30 .main{ 31 width: 100%; 32 background-color: #b3b3b3; 33 } 34 .main-wrap{ 35 margin: 0 300px; 36 } 37 .left{ 38 margin-left: -100%; 39 } 40 .right{ 41 margin-left: -300px; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="container .clearfloat"> 47 <div class="main col"> 48 <div class="main-wrap"> 49 main 50 </div> 51 </div> 52 <div class="left col">left</div> 53 <div class="right col">right</div> 54 </div> 55 </body> 56 </html>
