自适应两栏布局

左边固定宽度，右边自适应（左边固定width200px）

1.通过触发BFC实现

左边设置浮动；右边不设宽度，触发BFC

    <div class="box">
        <div style="float: left;" class="b-left"></div>
        <div style="overflow: hidden;" class="b-right"></div>
    </div>

2.浮动

左边设置浮动；右边 margin-left

    <div class="box">
        <div style="float: left;" class="b-left"></div>
        <div style="margin-left: 200px;" class="b-right"></div>
    </div>

3.flex布局

父元素设置display: flex, 右边flex: 1

    <div class="box" style="display: flex">
        <div  class="b-left"></div>
        <div style="flex: 1;" class="b-right"></div>
    </div>

4.绝对定位1

父元素设置position: relative;,左边position:absolute，；右边margin-left

注意：在使用absolate 的时候，要设置上下左右

    <div class="box" style="position: relative;" >
        <div style="position: absolute; left: 0;top: 0;" class="b-left"></div>
        <div  class="b-right" style="margin-left: 200px;"></div>
    </div>

5.绝对定位2

父级元素设置position: relative。右边设置为position: relative，left:200px，其余方向定位为0。

    <div class="box" style="position: relative;" >
        <div  class="b-left"></div>
        <div  class="b-right" style="position: absolute;left: 200px ;right: 0;top: 0;bottom: 0;"></div>
    </div>