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