左边固定,右边宽度自适应

非严格意义上的自适应（左边宽度改变，右边宽度不会自动填充）

1. float: 左边 float left ，右边 float right ，右边盒子用 calc 减去左边宽度即可

.father {
    width: 600px;
    height: 400px;
    border: 1px solod #000;
}

.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: blue;
}

.right {
    float: right;
    width: calc(100% - 200px);
    height: 100%;
    background-color: red;
}

2. inline-block: 两边都是 inline-block, 右边 calc 减去左边宽度即可（左边宽度改变，右边盒子模型会跟着移动，但是不会填充）

.father {
    width: 600px;
    height: 400px;
    border: 1px solod #000;
}

.left {
    display: inline-block;
    width: 200px;
    height: 100%;
    background-color: blue;
}

.right {
    display: inline-block;
    width: calc(100% - 200px);
    height: 100%;
    background-color: red;
}

3. position 定位: 常见于侧边栏定位，左边 absolute 右边 padding-left

.father {
    width: 600px;
    height: 400px;
    border: 1px solod #000;
    position: relative;
}

.left {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: blue;
}

.right {
    height: 100%;
    background-color: red;
    padding-left: 200px;
}

严格意义上的

1. flex 布局: 父元素 display: flex;，左边盒子固定宽度，右边盒子 flex: 1;

.father {
    width: 600px;
    height: 400px;
    border: 1px solod #000;
    display: flex;
}

.left {
    width: 200px;
    height: 100%;
    background-color: blue;
}

.right {
    height: 100%;
    background-color: red;
    flex: 1;
}

2. table 布局: 父元素 display: table;，左右两边盒子 display: table-cell;

.father {
    width: 600px;
    height: 400px;
    border: 1px solod #000;
    display: table;
}

.left {
    width: 200px;
    height: 100%;
    background-color: blue;
    display: table-cell;
}

.right {
    height: 100%;
    background-color: red;
    display: table-cell;
}

3. grid 布局:

.father {
    width: 600px;
    height: 400px;
    border: 1px solod #000;
    display: grid;
    grid-template-columns: 200px auto;
}

.left {
    background-color: blue;
}

.right {
    background-color: red;
}