两列布局（一列定宽，一列自适应，列等高）

结构：

   <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>

1.用table+table-cell实现两列布局（一列定宽，一列自适应，且table是自动的两列自动等高）

.parent {
        background-color: grey;
         500px;
        height: 300px;
        padding: 10px;
        box-sizing: border-box;

        display: table;
        table-layout: fixed;
        table-layout: fixed;/*加速table的渲染，实现布局优先*/
    }
    .left {
        display: table-cell;
         100px;

        background-color: skyblue;
        border-right: 10px solid transparent;
        background-clip: padding-box;/*设置背景的显示位置*/
    }
    .right {
        display: table-cell;
        background-color: greenyellow;
    }

2. 使用flex进行两列布局（一列定宽，一列自适应，列等高），flex的align-item属性默认值是stretch.

.parent {
        background-color: grey;
         500px;
        height: 300px;
        padding: 10px;

        display: flex;
    }
    .left {
         100px;
        margin-right: 10px;
        background-color: skyblue;
    }
    .right {
        flex: 1; /* 填充剩余部分 */
        background-color: greenyellow;
    }

3.使用float（伪等高）

.parent {
        background-color: grey;
         500px;
        height: 300px;
        padding: 10px;

        overflow: hidden;/*截断*/
    }
    .left,.right {
        padding-bottom: 99999px;
        margin-bottom: -99999px;
    }/*登高*/
    .left {
         100px;
        background-color: skyblue;
        margin-right: 10px;
        float: left;
        
    }
    .right {
        overflow: hidden;
        background-color: yellowgreen;
    }