两栏布局：左固定 右自填充

两栏布局：左侧固定 右侧自动填充整个区域

<div class="wrap">
  <div class="left">这是左</div>
  <div class="right">这是右</div>
</div>

右侧的 width 也可以设置百分比，不过没有 calc 灵活

1.利用 inline-block，需要配合 font-size，要不会导致字不显示

父 ：font-size: 0
左右：display: inline-block;font-size: 20px;

.wrap {
  width: 100%;
  font-size: 0;
}
.left {
  display: inline-block;
  width: 200px;
  background-color: red;
  font-size: 20px;
}
.right {
  display: inline-block;
  width: calc(100% - 200px);
  background-color: green;
  font-size: 20px;
}

2.利用 float: left

左：float: left
右：float: left; 或者 overflow: hidden/auto; 或者 display: inline-block; （触发块级格式化上下文（BFC））或者 margin-left: 200px; 左边 div 的 width 长度

.wrap {
  width: 100%;
}
 .left {
   float: left;
   width: 200px;
   background-color: red;
 }
 .right {
   float: left; /* 或者 margin-left: 200px; 或者 overflow: hidden/auto; 或者 display: inline-block;*/
   width: calc(100% - 200px);
   background-color: green;
 }

3.利用 position

父：position: relative;
左：position: absolute;
右：margin-left: 左边 div 的 width 长度

.wrap {
  width: 100%;
  position: relative;
}
.left {
  width: 200px;
  background-color: red;
  position: absolute;
}
.right {
  width: calc(100% - 200px);
  background-color: green;
  margin-left: 200px;
}

4.利用 表格布局

父：display: table;
左右：display: table-cell;

.wrap {
  width: 100%;
  display: table;
}
.left {
  width: 200px;
  background-color: red;
  display: table-cell;
}
.right {
  width: calc(100% - 200px);
  background-color: green;
  display: table-cell;
}

5.利用 flex

父：display: flex;
左：flex: 0 0 200px; 或者 width: 200px; 
右：flex: 1; 或者 width: calc(100% - 200px);

.wrap {
  width: 100%;
  display: flex;
}
.left {
  flex: 0 0 200px;  /* 或者 width: 200px; */
  background-color: red;
}
.right {
  flex: 1;  /* 或者 width: calc(100% - 200px); */
  background-color: green;
}