一个例子 - 看懂双飞翼布局

双飞翼布局

解决了圣杯布局宽度变窄后错乱的问题，增加了一个dom节点，没有了padding,增加了内部margin撑开

html

    
    
    



    

        
middle
    
    
left
    
right

css

    html,
    body {
        height: 100%;
        margin: 0;
    }

    /* body {
        padding:0 200px;  
    } */


    .middleWrapper {
        width: 100%;
        background: grey;
        float: left;
        height:100px;
    }

    .middle {
        margin: 0 200px;
        height: 100px;
        /* 撑满父元素 */
        /* float: left; */
        /* 浮动 */
    }

    .left {
        width: 200px;
        background: pink;
        height: 100px;
        float: left;
        /* 浮动 */
        /* left: -200px; */
        /* 用于再往左边移动自身宽度来不遮住middle */
        position: relative;
        /* 相对定位才可以left */
        margin-left: -100%;
        /* 负margin就是-100%相当于往左边移动100%父元素的宽度，就会移动到上一行中的开头 */
    }

    .right {
        float: left;
        width: 200px;
        background: lightseagreen;
        height: 100px;
        position: relative;
        margin-left: -200px;
        /* 移动自身宽度可以到上一行*/
        /* right: -200px; */
        /*由于有padding的存在所以再移动一个偏移自身的距离*/
    }