一、如何实现

圣杯布局 和双飞翼布局基本上是一样的，都是两边定宽，中间自适应的三栏布局，其中，中间栏放到 HTML 结构最前面保证最先渲染提升性能。解决方案大体相同，都是三栏全部 float:left 浮动

区别：解决中间栏 div 的内容不被遮挡上，圣杯布局的中间栏添加相对定位，并配合 left 和 right 属性，效果上表现为三栏是单独分开的；双飞翼布局是在中间栏的 div 中嵌套一个 div，内容写在嵌套的 div 里，然后对嵌套的 div 设置 margin-left 和 margin-right，中间栏还是100%的宽度，只不过中间栏的内容通过 margin 的值显示在中间

二、作用和区别

**
不同在于解决”中间栏 div 内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间 div 内容不被遮挡，将中间 div 设置了左右 padding-left 和 padding-right 后，将左右两个 div 用相对布局 position: relative 并分别配合 right 和 left 属性，以便左右两栏 div 移动后不遮挡中间 div。

双飞翼布局，为了中间 div 内容不被遮挡，直接在中间 div 内部创建子 div 用于放置内容，在该子 div 里用margin-left 和 margin-right 为左右两栏 div 留出位置。

多了1个 div，少用大致4个 css 属性（圣杯布局中间 divpadding-left 和 padding-right 这2个属性，加上左右两个 div 用相对布局 position: relative 及对应的 right 和 left 共4个属性，一共6个；而双飞翼布局子 div 里用margin-left 和 margin-right 共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。

简单说起来就是”双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了“，而不是你题目中说的”去掉relative “就是双飞翼布局“。

1. 圣杯布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         body,html{
  14.             height: 100%;
  15.         }
  16.         footer,header{
  17.             height:15%;
  18.             background: gold;
  19.         }
  20.         section{
  21.             height: 70%;
  22.             padding:0 200px;
  23.             min-width: 500px;
  24.         }
  25.         .left,.right{
  26.             width:200px;
  27.             height:100%;
  28.             position: relative;
  29.         }
  30.         .left{
  31.             background: red;
  32.             float: left;
  33.             margin-left:-100%;
  34.             left: -200px;
  35.         }
  36.         .right{
  37.             background: blue;
  38.             float: left;
  39.             margin-left:-200px;
  40.             right: 200px;
  41.         }
  42.         .middle{
  43.             width:100%;
  44.             height: 100%;
  45.             background: purple;
  46.             float: left;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <header></header>
  52.     <section>
  53.         <div class="middle">middile</div>
  54.         <div class="left">left</div>
  55.         <div class="right">right</div>
  56.     </section>
  57.     <footer></footer>
  58. </body>
  59. </html>

2. 双飞翼布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.       <style>
  10.       left, .main, .right {
  11.           float: left;
  12.            min-height: 130px;
  13.            text-align: center;
  14.        }
  15.        .left {
  16.            margin-left: -100%;
  17.            background: green;
  18.            width: 200px;
  19.        }
  21.        .right {
  22.            margin-left: -300px;
  23.            background-color: red;
  24.            width: 300px;
  25.        }
  26.        .main {
  27.            background-color: blue;
  28.            width: 100%;
  29.        }
  30.        .content{
  31.            margin: 0 300px 0 200px;
  32.        }
  33.       </style>
  34.     </style>
  35. </head>
  36. <body>
  37.    <div class="container">
  38.    　　<div class="main">
  39.        　　<div class="content">main</div> 
  40.        </div>
  41.    　　<div class="left">left</div> 
  42.    　　<div class="right">right</div> 
  43.    </div>
  44. </body>
  45. </html>