CSS两列布局多种方式

两列布局（一侧固定宽度，一侧自适应），在工作中应该是经常使用到，可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式，欢迎大家补充。

absolute + margin 方式

<div class="container">
    <div class="sidebar">固定</div>
    <div class="main">自适应</div>
</div>

.container {
   
  position: relative;
}
.sidebar {
   
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 200px;
  background: #67c23a;
}
.main {
   
  margin-left: 200px;
  height: 300px;
  background: #e6a23c;
}

修改 css 就可实现 位置调换，如下：

.sidebar {
   
  right: 0;
  /* ... */
}
.main {
   
  margin-right: 200px;
  /* ... */
}

优点： 交换<div class="sidebar">固定</div> 、 <div class="main">自适应</div>顺序 ，实现主要内容优先加载渲染。

缺点：absolute 定位，脱离文档流，当 sidebar 列的高度，超过 main 列的高度，会遮住下面的元素。需要给父盒子设置 overflow 属性。

float + margin 方式

<div class