双飞翼就是为了实现三列布局：左右固定，中间自适应；切浏览器会自上而下的出现中间部分。
下面我们来看下效果：

        <div class="box">
            <div class="center">
                <!-- 创建一个div 开造 -->
                <div class="inner"></div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </div>

.box {
        width: 100%;
        height: 300px;
        background: darkblue;
        margin: 0 auto;
    }

    .center {
        width: 100%;
        height: 100%;
        float: left;
    }
    .inner {
        margin: 0;
    }
    .left {
        width: 200px;
        height: 100%;
        background: darkgoldenrod;
        float: left;
        margin-left:-100%;
    }
    .right {
        width: 200px;
        height: 100%;
        background: darkred;
        float: left;
        margin-left: -200px;    }

css.png

1.给三个盒子float：left，
2.设置中间盒子width:100%,这个宽度是相对于父元素而言的，所以父元素是相对于浏览器而言宽度100%，
3.浮动特点就是这一行占满了就容不下其他元素了，只要宽度可以挤下就能挤进来，所以就是设置负边距让左右两边的盒子挤进来。