两列布局：左侧固定右侧自适应

5种布局方案，已知左侧宽度200px。

html结构：

<section class="float">
    <aside class="left">左侧</aside>
    <article class="right">右侧</article>
</section>

1、浮动布局：有2种方案

.float .left{
  float: left;
  width: 200px;
  background: #c1a1fd;
}
.float .right{
  background: #e8a1fd;
  /*方案一：BFC区域不会与float元素发生重叠，使用overflow:hidden来触发BFC，右侧就不会与左侧发生重叠。*/
  overflow: hidden; 
  /*方案二：外边距向左填充200px*/
  margin-left: 200px; 
}
/*方案一、方案二任选其一。

2、绝对定位布局：有2种方案 

.position{
  display: relative;
}
.position .left{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  background: #c1a1fd;
}
.position .right{
  margin-left: 200px; /*方案一*/
  /*
    方案二：
    position: absolute;
    top: 0;
    right: 0;
    left: 200px;    
  */
  background: #e8a1fd;
}

3、表格布局

.table{
  display: table;
  width: 100%;
}
.table .left, .table .right{
  display: table-cell;
}
.table .left{
  width: 200px;
  background: #c1a1fd;
}
.table .right{
  background: #e8a1fd;
}

4、flex布局

.flex{
  display: flex;
}
.flex .left{
  width: 200px;
  background: #c1a1fd;
}
.flex .right{
  flex: 1;
  background: #e8a1fd;
}

5、网格布局

.grid{
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 200px auto;
}
.grid .left{
  background: #c1a1fd;
}
.grid .right{
  background: #e8a1fd;
}