左侧固定，右侧自适应 三种实现办法(Flex,float + BFC ,float-margin-left)

//结构
<div class="demo">
    <div class="left"></div>
    <div class="right"></div>
</div>

1.Flex

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .demo {
        overflow: hidden;
        display: flex;
    }

    .left {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .right{
        height: 200px;
        background-color: aquamarine;
        flex: 1;
    }
</style>

2.float + BFC 

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .demo {
        overflow: hidden;

    }

    .left {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .right {
        height: 200px;
        background-color: aquamarine;
        /* 形成BFC盒子 */
        overflow: auto;
    }
</style>

 3.float + margin-left

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .demo {
        /* 清除浮动 */
        overflow: hidden;

    }

    .left {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .right {
        height: 200px;
        background-color: aquamarine;
        /* 固定盒子的宽度 */
        margin-left: 200px;
    }
</style>