三、双飞翼模型

3.1 原理

浮动元素margin-left：负数，表示相对于上一个元素位置偏移。

.box {
        width: 700px;
        height: 100px;
        border: 1px solid #000;
    }
    .box p {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box .no2 {
        background-color: green;
        /* margin-left:负数 表示相对于no1位置偏移 */
        margin-left: -50px;
        opacity: 0.2;
    }
    .box .no3 {
        background-color: blue;
    }

3.2 双飞翼模型

<div class="box">
    <div class="main">主内容</div>
</div>
<div class="left"></div>
<div class="right"></div>

    /* box left right 同级的浮动元素 */
    .box {
        /* 通栏效果 */
        float: left;
        width: 100%;
        height: 200px;
        background-color: #eee;
    }
    .box .main {
        /* 标准流 宽度自适应 标准流不设置宽度 
        同时设置margin：正数 也会占有位置 
        子盒子不设置宽度 子盒子实际占有宽度（包含margin）撑满父盒子内容宽度
        */
        margin: 0px 210px;
        height: 200px;
        background-color: green;
    }
    .left {
        float: left;
        /* 固定宽度 */
        width: 200px;
        height: 300px;
        background-color: red;
        /* 相对于no1位置的偏移 */
        margin-left: -100%;
    }
    .right {
        float: left;
        /* 固定宽度 */
        width: 200px;
        height: 400px;
        background-color: blue;
        /* 移动自身宽度 */
        margin-left: -200px;
    }