实现两栏布局的几种方式

两栏布局(左侧固定宽度，右侧自适应)，在工作中总结了几种方法

<!-- HTML结构 -->
<div class="wrap">
    <div class="left">
        左侧固定内容
    </div>
    <div class="right">
        右侧内容自适应
    </div>
</div>

1. 使用浮动—float

   /* 清除浏览器默认边距 */
   * {
       margin: 0;
       padding: 0;
   }
   
   .wrap {
       overflow: hidden;
       border: 1px solid red;
   }
   /* 脱离文档流 */
   .left {
       float: left;
       width: 200px;
       height: 200px;
       background: purple;
   }
   
   .right {
       margin-left: 200px;
       background: skyblue;
       height: 200px;
   }
   

2. 使用绝对定位实现—absolute

   /* 清除浏览器默认边距 */
   * {
       margin: 0;
       padding: 0;
   }
   
   .wrap {
       overflow: hidden;
       position: relative;
   }
   /* 脱离文档流 */
   .left {
       position: absolute;
       left: 0;
       top: 0;
       width: 200px;
       height: 200px;
       background: purple;
   }
   
   .right {
       margin-left: 200px;
       background: skyblue;
       height: 200px;
   }
   

3. 使用表格布局—table

   /* 清除浏览器默认边距 */
   * {
       margin: 0;
       padding: 0;
   }
   /* 表格布局 */
   .wrap {
       display: table;
       width: 100%;
   }
   
   .left {
       display: table-cell;
       width: 200px;
       height: 200px;
       background: purple;
   }
   
   .right {
       display: table-cell;
       background: skyblue;
       height: 200px;
   }
   

4. 使用calc()函数

   /* 清除浏览器默认边距 */
   * {
       margin: 0;
       padding: 0;
   }
   /* 双float */
   .wrap {
       overflow: hidden;
   }
   
   .left {
       float: left;
       width: 200px;
       height: 200px;
       background: purple;
   }
   
   .right {
       float: left;
       background: skyblue;
       height: 200px;
       width: calc(100% - 200px);
   }
   

5. 使用inline-block和calc()函数

   /* 清除浏览器默认边距 */
   * {
       margin: 0;
       padding: 0;
   }
   /* 双float */
   .wrap {
       overflow: hidden;
       width: 100%;
       font-size: 0;
   }
   
   .left {
       display: inline-block;
       width: 200px;
       height: 200px;
       background: purple;
       font-size: 20px;
   }
   
   .right {
       display: inline-block;
       background: skyblue;
       height: 200px;
       width: calc(100% - 200px);
       font-size: 20px;
   }
   

6. 使用弹性布局—flex

   /* 清除浏览器默认边距 */
   * {
       margin: 0;
       padding: 0;
   }
   .wrap {
       display: flex;
   }
   .left {
       height: 200px;
       background: purple;
       flex:0 0 200px
   }
   .right {
       background: skyblue;
       height: 200px;
       flex: 1;
   }