左侧固定右侧自适应两栏布局

[xuexueq]

左侧固定右侧自适应两栏布局

以下六种方案中，只有方案二 flex 布局能保证两栏是等高的；其他方案两栏均不等高。

方案一：float + BFC

    #wrapper {
        overflow: hidden; // 清除浮动
    }

    .left {
        float: left;
        width: 200px;
    }

    .right {
        overflow: hidden; // 触发BFC
    }

方案二：flex （同时两栏等高）

    .wrapper {
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }

方案三： float + margin-left

    #wrapper {
        overflow: hidden; // 清除浮动
    }
    .left{
        float: left;
        width: 100px;
    }
    .right {
        margin-left:100px;
    }

方案四： 双 float

    #wrapper {
        overflow: hidden;
    }

    .left, .right {
        float: left;
    }

    .left {
        width: 100px;
    }

    .right {
        width: calc(100% - 100px);
    }

方案五： 双 inline-block

    .wrapper {
        font-size: 0;
    }
    .left, .right {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
    }
    .left {
        width : 100px;
    }
    .right {
        width: calc(100% - 100px);
    } 

注意： 消除默认的间隙；

方案六： position + margin-left

    .wrapper {
        position: relative;
    }
    .left {
        position: absolute;
        width: 100px;
    }
    .right {
        margin-left: 100px;
    }

问题：绝对定位会脱离文档流，导致父元素不会计算该元素的高度，并且后面兄弟元素会叠加在该元素之上。