前期处理

为了避免出现问题我们先给body设置一个min-width:600px;
在content中我们给left，right，midlle都添加float:left效果，设置left，right的宽高。
middle的宽度设置为100%，高度为与left，right的高度相同，同样为了便于看效果我们这里也给它们一个背景色。
这里有个需要注意的地方，我们还应该给content设置一个高度，content中的div我们添加了float：left属性，因此他们都脱离了文本流，导致出现了高度塌陷。

（ps:我这里是在content中添加了一个overflow: hidden，形成一个BFC区域来解决这个问题的，感兴趣的小伙伴可以自行了解，当然你不这样做设置content的高度就行啦）

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 600px;
}
#middle,#left,#right{
    float: left;
}
#content{
    overflow: hidden;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#middle{
    width: 100%;
    height: 200px;
    background: yellowgreen; 
}

我们发现现在的页面是这样子的，那这怎么回事呢？

答案很简单，left,right,middle本来应该是在一条直线上的，但是content的宽度不够，就把left，right两个盒子挤下来啦。

那现在我们分别来看看这两种布局接下来解决这个问的方法吧：

圣杯布局

我们先给content设置一个padding：0 200px,将左右两边各腾出200px宽度。
接下来我们只需要将left,right，两个盒子放在两个区域就行啦。
最后分别给left，right设置margin属性调整位置。

#content{
    overflow: hidden;
    padding: 0 200px;
}
#left{
    margin-left:-100% ;

} 
#right{
    margin-left: -200px;

我们再来看一下效果

现在就可以看到left，right和middle就来到了同一行啦，接下来的操作就So easy啦，给left和right分别一个relative定位将他们调整到两端即可。

 #left{
    margin-left:-100% ;
    position: relative;
    left:-200px;
} 
#right{
    margin-left: -200px;
    position: relative;
    left:200px; 
}

双飞翼布局

那我们看看双飞翼布局是怎么解决这个问题的呢。来往下看

双飞翼布局是在middle下添加了一个middle-inner盒子，将middle的内容放在这个盒子里面（这有什么用呢？不着急咱先往下看）。
我们和圣杯布局中一样也给float，left设置margin值调整位置。
但是此布局就不需要给left,right设置定位啦。

#left{
    float: left;
    margin-left: -100%;
}
#right{
    float: left;
    margin-left: -200px;
}

.middle-inner{
    margin: 0 200px;
}

总结一下

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

不同的就是html结构，双飞翼是在middle元素内部又设置了一个milddle-inner并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。
双飞翼布局可以多了一个html结构，但是可以不用设置left,right元素的定位。

下面给一下完整代码：

圣杯布局：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        min-width: 600px;
      }

      #middle,
      #left,
      #right {
        float: left;
      }
      #content {
        overflow: hidden;
        padding: 0 200px;
      }
      #left,
      #right {
        width: 200px;
        height: 200px;
        background: pink;
      }
      #middle {
        width: 100%;
        height: 200px;
        background: yellowgreen;
      }
      #left {
        margin-left: -100%;
        position: relative;
        left: -200px;
      }
      #right {
        margin-left: -200px;
        position: relative;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div id="middle">middle</div>
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
  </body>
</html>

双飞翼布局：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .warp {
        min-width: 600px;
      }

      #left,
      #right {
        width: 200px;
        height: 200px;
        background: pink;
      }
      #middle {
        background: yellowgreen;
        width: 100%;
        float: left;
        height: 200px;
      }
      #content {
        overflow: hidden;
      }
      #left {
        float: left;
        margin-left: -100%;
      }

      #right {
        float: left;
        margin-left: -200px;
      }
      .middle-inner {
        margin: 0 200px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <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>
  </body>
</html>

圣杯布局和双飞翼布局

前期处理

圣杯布局

双飞翼布局

总结一下