1. 利用浮动

• 将左边元素宽度设为200px，并设置向左浮动
• 将右边元素的margin-left设为200px，宽度为auto（默认为auto，撑满整个父元素）

.outer {height: 100px;
}
.left {float: left;width: 200px;
}
.right {margin-left: 200px;width: auto;
}
<!-- HTML结构如下 后面实现也基于这个结构-->
<div class="outer"><div class="left" style="background-color: green;">left</div><div class="right" style="background-color: yellow;">right</div>
</div>

2. 浮动 + overflow

• 左边元素固定大小，并左浮动
• 右边元素设置overflow: hidden，这样右边就触发BFC，BFC的区域不会与浮动元素发生重叠

.outer{
height: 100px;
}
.left{width: 200px;float: left;
}
.right{overflow: hidden;
}

3. 利用flex布局

• 父元素设置display: flex
• 左边元素设置固定宽度200px
• 右边元素设置flex: 1

.outer {display: flex;height: 100px;
}
.left {width: 200px;
}
.right {flex: 1;
}

4. 绝对定位

• 父元素设为relative定位
• 左边元素设置absolute定位，并设宽度200px
• 右边元素的margin-left设置为200px

.outer {position: relative;height: 100px;
}
.left {position: absolute;width: 200px;
}
.right {margin-left: 200px;
}