圣杯布局和雙飛翼布局的目的：

1.三欄布局羽峰，中間一欄最先加載和渲染（內(nèi)容最重要）
2.兩側(cè)內(nèi)容固定渠啤，中間內(nèi)容隨著寬度自適應(yīng)
3.一般用于PC網(wǎng)頁
技術(shù)總結(jié)：
1.使用float 布局
2.兩側(cè)使用margin負(fù)值壤追，以便和中間內(nèi)容橫向重疊
3.防止中間內(nèi)容被兩側(cè)覆蓋咙咽，圣杯布局用padding玛瘸，雙飛翼布局用margin

首先來看圣杯布局，最終效果：

圣杯布局-1.png

原理：

container容器設(shè)置左右的padding翠桦，空余出左右邊欄的位置，container下的div左浮動胳蛮。

圣杯布局-2.png

left設(shè)置margin-left:-100%,margin的負(fù)值向左移動销凑，100%的container距離，就可以讓left移動到center的起始位置

圣杯布局-3.png

圣杯布局-4.png

right設(shè)置margin-right負(fù)值斗幼，如果對一個元素設(shè)置margin-right負(fù)值，后面的元素就會向前移動抚垄，就可以簡單理解為本元素所占據(jù)的空間變小了蜕窿，right的width為100px，margin-right:-100px之后呆馁，自身占據(jù)的空間就為0px桐经，不會再換行，所以right就會出現(xiàn)在center的右側(cè)

圣杯布局-5.png

上代碼：

    body {
      min-width: 550px;
    }

    .header,
    .footer {
      text-align: center;
      background: #ccc;
    }

    .footer {
      clear: both;
    }

    .container {
      padding: 0 100px 0 200px;
    }

    .container>div {
      float: left;
    }

    .center {
      width: 100%;
      background: #ff0;
    }

    .left {
      position: relative;
      right: 200px;
      margin-left: -100%;
      width: 200px;
      background: #0ff;
    }

    .right {
      margin-right: -100px;
      width: 100px;
      background: #f0f;
    }

<div class="header">This is Header</div>
<div class="container">
        <div class="center">This is Center</div>
        <div class="left">This is Left</div>
        <div class="right">This is Right</div>
</div>
<div class="footer">This is Footer</div>

雙飛翼布局

相對于圣杯布局來說浙滤，雙飛翼布局更加簡單一些阴挣，浮動的元素都通過margin-left負(fù)值來定位
1.還是先將元素左浮動
2.通過margin的方式預(yù)留出兩邊的空位
3.給left設(shè)置margin-left:-100%移動整個寬度，到目標(biāo)位置

雙飛翼布局-1.png

4.給right設(shè)置margin-right:-100px纺腊，左移一個right的寬度畔咧，到目標(biāo)位置

雙飛翼布局-2.png

上代碼：

body {
      min-width: 550px;
    }

    .column {
      float: left;
    }

    .main {
      background: #ff0;
      width: 100%;
    }

    .main-wrap {
      margin: 0 100px;
    }

    .left {
      background: #f0f;
      width: 100px;
      margin-left: -100%;
    }

    .right {
      background: #0ff;
      width: 100px;
      margin-left: -100px;
    }

<div class="main column">
    <div class="main-wrap">
      this is center
    </div>
  </div>
  <div class="left column">this is left</div>
  <div class="right column">this is right</div>