圣杯布局、双飞翼布局

先看看效果图，更直观去理解这种布局

这种布局就是三列布局（中间自适应，两侧固定宽度），所谓的圣杯布局和双飞翼布局，就是实现这种布局的不同方法。

这种布局的优点是：中间main区域先渲染，然后在渲染left，最后是right，这样更符合开发中，重要的内容先渲染，次要的内容放在两侧，后渲染。

双飞翼布局

• html

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

• css

    *{ margin: 0; padding: 0; }
    .container{ width: 100%; height: 200px; overflow: hidden; }
    .main{ width: 100%; height: 100px; float: left; background-color: red; }
    .main-con{ height: 200px; margin: 0 200px; }
    .left{ width: 200px; height: 200px; float: left; margin-left: -100%; background-color: green; }
    .right{ width: 200px; height: 200px; float: left; background-color: blue; margin-left: -200px; }

改布主要用到了，margin负边距，浮动
应用main-con模块是为了让内容归为，不然的内容就在left区域，

圣杯布局

• html

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

• css

    *{ margin: 0; padding: 0; }
    .container{ height: 200px; padding: 0 200px; }
    .main{ width: 100%; height: 100px; float: left; background-color: red; }
    .left{ width: 200px; height: 200px; float: left; position: relative; left: -200px; margin-left: -100%; background-color: green; }
    .right{ width: 200px; height: 200px; float: left; position: relative; right: -200px; margin-left: -200px; background-color: blue; }

圣杯布局主要用到：padding， 浮动，position的负定位（归位）

总结：其实这布局技巧不难发现，
left模块，都应用了margin-left: -100%;
main模块，或用padding活用margin，都是为了给两侧留白，让left和right有位置去放
right模块，应用margin-left：-200px;（right宽度）;

值得一提的是，三个模块都用了浮动，所有最后尽量都把浮动一清除，我用overflow：hidden；