一个例子 - 看懂圣杯布局

代码解释如下

html

    
    
    



    
middle
    
left
    
right

css

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

    body {
        padding:0 200px;  /* 设置padding用于框住middle, 让左右有空间占位 */
    }

    .middle {
        background: grey;
        width: 100%; /* 撑满父元素 */
        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的存在所以再移动一个偏移自身的距离*/
    }
   

效果如下

image.png

宽度变小BUG

怎么解决呢，看下一篇双飞翼布局，把middle包裹一个div就可以了

image.png

参考：https://blog.csdn.net/Sallywa/article/details/89281231