圣杯布局、双飞翼布局

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

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

这种布局的优点是：中间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；