直接步入正题：

圣杯布局：(以下代码可以直接cv，你懂的)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      min-width: 600px;
    }

    #header,
    #footer {
      background-color: #777;
      width: 100%;
      height: 100px;
    }

    #middle,
    #left,
    #right {
      height: 300px;
      float: left;
    }

    #content {
      overflow: hidden;
      padding: 0 300px;
    }

    #middle {
      background-color: #bfa;
      width: 100%;
    }

    #left {
      background-color: blue;
      width: 300px;
      margin-left: -100%;
      position: relative;
      left: -300px;
    }

    #right {
      background-color: blue;
      width: 300px;
      /*
          这里重点：由于left和right都加了浮动，
          当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 
      */
      margin-left: -300px;
      position: relative;
      left: 300px;
    }
  </style>
</head>

<body>
  <div id="header">header</div>
  <div id="content">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
  <div id="footer">footer</div>
</body>

</html>

双飞翼布局：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      min-width: 600px;
    }

    #header,
    #footer {
      background-color: #777;
      width: 100%;
      height: 100px;
    }

    #middle,
    #left,
    #right {
      height: 300px;
      float: left;
    }

    #content {
      overflow: hidden;
    }

    #middle {
      background-color: #bfa;
      width: 100%;
    }

    #left {
      background-color: blue;
      width: 300px;
      margin-left: -100%;
    }

    #right {
      background-color: blue;
      width: 300px;
      margin-left: -300px;
    }

    .middle_inner {
      margin: 0 300px;
    }
  </style>
</head>

<body>
  <div id="header">header</div>
  <div id="content">
    <div id="middle">
      <div class="middle_inner">middle</div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
  <div id="footer">footer</div>
</body>

</html>

总结： 双飞翼布局和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布

区别就是：双飞翼布局是在middle元素内部新增了一个milddle-inner并设置它的左右margin，而非圣杯布局中content的padding，来排除两边元素的覆盖

双飞翼布局可以多了一个html结构，但是可以不用设置left,right元素的定位

CSS圣杯布局和双飞翼布局特点和区别

直接步入正题：