实现一个两列布局（左侧定宽，右侧自适应）

html代码：

<div class="left">固定宽度区</div>
<div class="right">自适应宽度区</div>
<div class="footer">底部区</div>

 

css代码：

/*第一种方法(浮动)*/
 .left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: blue;
}

.right {
  margin-left: 100px;
  height: 200px;
  background: green;
}

.footer {
  clear: both;
  background-color: yellow;
} 



/*第二种方法（相对布局）*/
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 150px;
  background-color: blue;
}

.right {
  margin-left: 100px;
  height: 150px;
  background-color: green;
}

.footer {
  background-color: yellow;
}


/*第三种方法（flex）*/
.left {
  float: left;
  width: 100px;
  height: 150px;
  background-color: blue;
}

.right {
  display: flex;
  flex: 1;
  height: 150px;
  background-color: green;
}

.footer {
  background-color: yellow;
}