双飞翼布局与圣杯布局

两种布局的基本思路：

1. 中间层100%占满同一高度空间的整层宽度，左右两层被挤出中间层所在区域时， 使用margin-left的负值将左右层拉回与中间层同一高度的空间；
2. 接着调整左右两层到指定位置；
3. 最后使用margin或padding属性调整中间层被左右层占住的显示区。

圣杯布局

圣杯布局采用一个父层包含中间、左右三个子层，设置父层的padding值腾出左右两层的显示区， 并对左右两层使用relative和left、right值调整位置。
html结构：

  <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>

CSS代码：

.container{ padding: 0px 120px 0 140px;/*上右下左腾出宽度*/ overflow: auto;/*内容溢出自动修正*/ }

.main{ width: 100%; float: left; position: relative; }

.left{ width: 140px; float: left; margin-left: -100%;/*将left层拉回main层所在高度区域*/ left: -140px;/*调整位置*/ position: relative; }

.right{ width: 120px; margin-left: -120px;/*将right层拉回main层所在高度区域*/ right: -120px;/*调整位置*/ position: relative; }

双飞翼布局

双飞翼布局是将中间层和左右两层并列，再在中间层里设置一个子层 “inner”， 设置子层 “inner”的margin值空出左右两层的显示区，再使用margin值调整左右两层位置。
html结构：

<div class="container"><!-- 用容器将左中右三层包起来 -->
    <div class="main">
        <div class="inner"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
</div>

CSS代码：

.container {
  padding: 20px;
  background: #eee;
  border: 1px solid #999;
  overflow: auto;
  margin: 20px;
}
.main{
    width: 100%;
    float: left;
    }

.inner{
    margin：0 120px 0 140px;
    ｝

.left{
    width: 140px;
    float: left;
    margin-left: -100%;/*将left层拉回main层所在高度区域*/
    }

.right{
    width: 120px;
    float: left;
    margin-left: -120px;/*将right层拉回main层所在高度区域*/
    box-sizing: border-box;
    }