一、圣杯布局
    思路：
    1、center部分宽度为100%且先渲染
    2、父容器盒子设置padding
    3、左侧栏利用margin-left负值进行位移，再用相对定位往左侧移动自身宽度（也可以直接用css3，calc函数calc（-100% - width））
    4、右侧栏，利用margin-right负值，将盒子自身实际宽度减为0，盒子自然就往上一行位移，排在最右侧。为啥不用margin-left负值，因为父容器设置了内边距，将右侧栏直接往前位移，会挤占中间部分的宽度

    1. <div class="container">
    2.   <!-- // 中间视图优先渲染，放在另外两栏前 -->
    3.   <div class="center colume"></div>
    4.   <div class="left colume"></div>
    5.   <div class="right colume"></div>
    6. </div>
    8. .container {
    9.   padding: 0 200px;
    10. }
    11. .colume {
    12.   float: left;
    13.   height: 100px;
    14. }
    15. .center {
    16.   /* 宽度变化 */
    17.   width: 100%;
    18.   background-color: palegoldenrod;
    19. }
    20. .left {
    21.   width: 200px;
    22.   /* 先移到父容器content左侧，再移到左边界 */
    23.   /* margin-left负值可以将左侧栏往左移动，直到父容器最左侧 */
    24.   margin-left: -100%;
    25.   /* margin-left: calc( -100% - 200px) 效果一样，不需要再用相对位移 ; */
    26.   /* 利用相对定位（根据自身定位），可以将左侧栏移到最左侧 */
    27.   position: relative;
    28.   /* 相对定位，相对自己的边框定位 */
    29. right: 200px;
    30.   /* 和left: -200px一个效果 */
    31.   background-color: burlywood;
    32. }
    33. .right {
    34. width: 200px;
    35.   /* margin-right和margin-bottom为负值时，都有一种压缩自身空间的效果， */
    36.   /* 当压缩到自身宽度时，等于不占空间，自然就往上面排列 */
    37.   /* 不能使用margin-left负值，右侧栏宽度没变，这样会挤占中间内容空间（单纯的往左侧唯一，和margin-right不一样） */
    38.   margin-right: -200px;
    39.   background-color: lightgreen;
    40. }

    二、双飞翼布局
    由淘宝团队提出，比双飞翼布局更简洁
    思路：
    1、所有外层盒子都向左浮动
    2、中间父容器盒子宽度为100%（中间父容器不设置margin，会把整个页面撑大），内部容器设置margin： 0 200px
    3、左侧栏移动：margin：-100%；
    4、右侧栏移动：直接设置mrgin-left：-200px；

    1.   <body>
    2.     <style>
    3.       .colume {
    4.         float: left;
    5.         height: 100px;
    6.       }
    7.       .center {
    8.         width: 100%;
    9.         background-color: palegoldenrod;
    10.       }
    11.       .left {
    12.         width: 100px;
    13.         background-color: palegreen;
    14.         margin-left: -100%;
    15.       }
    16.       .right {
    17.         width: 100px;
    18.         background-color: darkcyan;
    19.         margin-left: -100px;
    20.       }
    21.       .innerCenter {
    22.         margin: 0 100px;
    23.       }
    24.     </style>
    25.     <div class="center colume">
    26.       <div class="innerCenter">innerCenter</div>
    27.     </div>
    28.     <div class="left colume"></div>
    29.     <div class="right colume"></div>
    30.   </body>