css圣杯布局与双飞翼布局

1. 圣杯布局和双飞翼布局，都是属于三列布局的经典布局。
2. 圣杯布局是歪果仁发明的；
3. 双飞翼布局是圣杯布局的优化版，是淘宝UED提出；
4. 它们的效果图类似，但是实现方法不同。
5. 以下是效果图：

实现步骤：

1、先写出HTML结构

<div class="header">头部</div>
<div class="main">内容</div>
<div class="footer">尾部</div>

2、写出上面结构的基本样式

.header , .footer {
      width: 100%;
      height: 200px;
      background: #ccc;
}

3、布局正式开始，给mian元素添加内容

<div class="main">
      <div class="center">自适应宽度</div>
      <!-- center译为主要内容，所以写前边，这样也有利于SEO -->
      <div class="left">左列定宽</div>
      <div class="right">右列定宽</div>
</div>

4、定义 center、left、right 的基本样式。

.center {
      width: 100%;
      height: 500px;
      background: lightgray;
}
.left {
      width: 200px;
      height: 500px;
      background: lightpink;
}
.right {
      width: 300px;
      height: 500px;
      background: lightgreen; 
}

需要注意：到这一步的时候，请在浏览器查看效果。

出现以上效果是因为： center、left、right 处于文档流中，而块元素又独占一行。

5、现在让 center、left、right 浮动起来，分别加上以下代码。

.center, .left, .right {
      float: left;
}

现在 center、left、right 都浮动起来了，但是因为 center 的 width 为 100%，center 仍然会占满一行，所以 left 和 right 只能浮在 center 下面。

注意：我们没有给 main 设置高度，它的高度本来是由里边的子元素（center、left、right） 撑起来的。但是现在子元素都设置了浮动，脱离了文档流，所以 main 的高度又变成了0，所以 footer 元素会往上跑，被浮动元素盖住。

6、使用 clearfix 清除浮动，让 footer 回到原来的位置。

HTML代码：
<div class="main clearfix">  // 给 main 加上 clearfix 类
      ......
</div>

CSS代码：
.clearfix::after {
      content: "";
      display: block;
      clear: both;
}

7、给 left 和 right加以下代码，让 left 和 right 与 center 在同一行显示。

.left {
      margin-left: -100%;
}
.right {
      margin-left: -300px;
}

现在可以看到，“中间自适应”几个字不见了，这是因为 left 和 right 已经盖在了 center 上边。如果 center 中有更多内容，依然将无法显示。

为了解决上述出现的问题，圣杯布局与双飞翼布局采用了不同的方法。

---

圣杯布局：

1、给三列的父元素（main）， 加上 左margin 和 右margin（也有人使用 padding），将三列挤到中间来，这样左边和右边就会预留出位置。

.main { 
    margin-left: 200px;
    margin-right: 300px;
}

2、给 left 和 right 设置相对定位，将它们移动到相应的位置。

.left {
    position: relative;
    left: -200px;
}
.right {
    position: relative;
    right: -300px;
}

至此，圣杯布局完成。

可以放大缩小浏览器窗口，查看效果，看看 center 是否为自适应。

---

现在回到上面第7步，将问题重现。

双飞翼布局：

1、给 center 加一个子元素 inner。

<div class="center">
     <div class="inner">中间自适应</div>
</div>

2、给 inner 设置 左margin 和 右 margin，将 inner 挤到中间显示。

.inner {
      /* 为了突出显示 inner 元素，给它加上了 height 和 border 以及 上margin */
      height: 300px;
      border: 1px solid red;
      margin-top: 10px;

      /* 以下是设置的 margin */
      margin-left: 200px;
      margin-right: 300px;
}

至此，双飞翼布局完成。

可以放大缩小浏览器窗口，查看效果，看看 center 是否为自适应。

如有不当之处，欢迎指出~~~