CSS两栏布局(左边宽度固定，右边自适应)

以下5种实现方式:

所有实现方式的HTML代码是相同的，如下:

// html
<div class="father">
     <div class="left"></div>
     <div class="right"></div>
</div>

对应的CSS代码如下:
(1)利用浮动
左边元素宽度固定(假如设置为100px)，向左浮动;
右边元素margin-left设置为100px，宽度设置为auto;

// css样式
.father {
  height: 100px;
}
.left {
  float: left;
  width: 100px;
  height: 100px;
  background: green;
}
.right {
  margin-left: 100px;
  width: auto;
  height: 100px;
  background: red;
}

实现效果如下:
(2)利用浮动+BFC
左边元素宽度固定(假如设置为100px)，向左浮动;
右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠;

// css样式
.father {
  height: 100px;
}
.left {
  float: left;
  width: 100px;
  height: 100px;
  background: green;
}
.right {
  overflow:hidden;
  height: 100px;
  background: red;
}

(3)利用flex布局
父元素设置flex布局，左边元素宽度固定，右边元素设置为flex:1(填满剩余空间，flex: 1是flex-grow:1; flex-shrink:1; flex-basis: auto的缩写)

// css样式
.father {
  display:flex;
  height:100px;
}
.left {
  width: 100px;
  background: green;
}
.right {
  flex:1;
  background: red;
}

(4)利用grid布局
父元素设置"display: grid"属性，设置"grid-template-columns: 100px 1fr"属性，表示第一列宽度始终为100px，第二列的宽度自适应。

// css样式
.father {
  display:grid;
  height:100px;
  grid-template-columns:100px 1fr;
}
.left {
  background: green;
}
.right {
  background: red;
}

(5)利用绝对定位
父级元素设置为相对定位。
子元素设置为绝对定位，左边子元素设置left为0，宽度100，右边元素left设置为100

// css样式
.father {
   position: relative;
}
.left {
  position: absolute;
  width:100px;
  left:0;
  height: 100px;
  background: green;
}
.right {
  position: absolute;
  left:100px;
  right:0;
  height:100px;
  background: red;
}