【聊一聊】css中的经典布局——双飞翼布局

    上一文，【聊一聊】css中的经典布局——圣杯布局中，我介绍过，圣杯布局不添加额外的标签（主要是只中间块）。在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？

    今天，我们来认识一下它的小伙伴——双飞翼布局。

    在淘宝UED探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。

    DOM结构：main内层增加了一个div

    <div class="header">Header</div>
    <div class="bd">
        <div class="main">
            <div class="inner">Mian</div>
        </div>
        <div class="left">Left</div>
        
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>

样式：去掉了左右栏的相对定位，去掉包裹层padding，以中间栏新增div的margin代替

*{
        padding:0;margin:0;
    }
    .header,.footer{
        height:50px;
        width:100%;
        background:#666;
        clear:both;
    }
    .bd{
        /* padding-left:150px;
        padding-right:190px; */
    }
    .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
        margin-left:-100%;  /*相对于包含快的宽度*/
        /* position:relative;
        left:-150px; */
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
        margin-left:-190px;
        /* position:relative;
        right:-190px; */
    }
    .inner{
        margin-left:150px;
        margin-right:190px;
    }

 这个布局还有个好处，让Main变成BFC元素了，屏幕宽度缩小Main也不会被挤下去，圣杯布局就会被挤下去。