CSS经典布局——双飞翼布局

当然，圣杯在正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线变窄，「圣杯」将会「破碎」掉。如图，当 main 部分的宽小于 left 部分时就会发生布局混乱。我们一般都给个 container 的min-width，然后还有一点就是圣杯要清除浮动。

好的，我们来看看双飞翼布局。就不像前面那篇文章一样一点一点写步骤了，直接上源代码。

<style>
  .body {
    color: #fff;
  }

  .col {
    float: left;
  }

  .header {
    height: 50px;
    background-color: #666;
    color: #fff;
  }

  .center {
    width: 100%;
    background-color: #555;
  }

  .center-wrap {
    margin: 0 100px 0 100px;
    height: 200px;
  }

  .left {
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: #999;
  }

  .right {
    width: 100px;
    height: 200px;
    margin-left: -100px;
    background-color: #999;
  }

  .footer {
    height: 50px;
    background-color: #666;
    color: #fff;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
</style>


<div class="header">header</div>
<div class="body clearfix">
  <div class="center col">
    <div class="center-wrap">
      center
    </div>
  </div>
  <div class="left col">
    left
  </div>
  <div class="right col">
    right
  </div>
</div>
<div class="footer">footer</div>

思路：

双飞翼布局和圣杯布局很类似，不过是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。
这样可以先做好主体部分，然后再将附属部分放到合适的位置！

这样可以先做好主体部分，然后再将附属部分放到合适的位置！

1. 首先把left、middle、right都放出来, middle中增加inner
2. 给它们三个设置上float: left, 脱离文档流；
3. 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
4. left、right设置上各自的宽度
5. middle设置width: 100%;

比较：

-	优点	缺点
圣杯	结构简单，无多余 dom 层	中间部分宽度小于左侧时布局混乱
绝对定位	结构简单，且无需清理浮动	两侧高度无法支撑总高度
双飞翼	支持各种宽高变化，通用性强	dom 结构多余层，增加渲染树生成的计算量