实现两栏布局的几种方式

<!-- HTML结构 -->
<div class="wrap">
    <div class="left">
        左侧固定内容
    </div>
    <div class="right">
        右侧内容自适应
    </div>
</div>

-----利用margin-left

1.使用浮动—float

2.使用绝对定位实现—absolute

3.使用calc()函数

4.使用inline-block和calc()函数

---使用弹性布局—flex
.wrap {
    display: flex;
}
.left {
    height: 200px;
    background: purple;
    flex:0 0 200px
}
.right {
    background: skyblue;
    height: 200px;
    flex: 1;
}

----使用表格布局—table（不推荐使用）
.wrap {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    display: table-cell;
    background: skyblue;
    height: 200px;
}