实现两栏布局

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;
}