双飞翼布局

• 左右宽度固定，中间宽度自适应，中间的内容优先加载
• 先建一个父级div,进行浮动，清除浮动，优先加载的内容的父级宽为100%，再给优先加载的内容两边留出距离，同时左右两边margin-left.

* {
        margin: 0;
        padding: 0;
    }
    .clear {
        overflow: hidden;
    }
    .container {
        width: 100%;
        background-color: #ccc;
    }
    .item {
        float: left;
        color: white;
        font-size: 20px;
    }
    .content {
        height: 200px;
        background-color: green;
        margin-left: 200px;
        margin-right: 150px;
    }
    .left-item {
        width: 200px;
        background-color: red;
        margin-left: -100%;
    }
    .right-item {
        width: 150px;
        background-color: blue;
        margin-left: -150px;
    }
    <div class="clear">
        <div class="container item">
            <div class="content">主要内容</div>
        </div>
        <div class="left-item item">left-item</div>
        <div class="right-item item">right-item</div>
    </div>

如何清除浮动

• 父级加overflow：hidden
• 父级设置clearfix，.clearfix:after {display:block;clear:both;content:""}
• 父级也浮动