两栏布局的实现

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

•  <div class="outer">
      <div class="left"></div>
      <div class="right"></div>
    </div>

• 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

      .left {
        float: left;
        width: 200px;
        height: 100px;
        background: tomato;
      }
  
      .right {
        margin-left: 200px;
        height: 100px;
        width: auto;
        background: gold;
      }

• 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

    .left {
        width: 100px;
        height: 200px;
        background: red;
        float: left;
      }
  
      .right {
        height: 200px;
        background: blue;
        overflow: hidden;
      }

• 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

   .outer {
        display: flex;
        height: 100px;
      }
  
      .left {
        width: 200px;
        background: tomato;
      }
  
      .right {
        flex: 1;
        background: gold;
      }

• 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

    .outer {
        position: relative;
        height: 100px;
      }
  
      .left {
        position: absolute;
        width: 200px;
        height: 100px;
        background: tomato;
      }
  
      .right {
        margin-left: 200px;
        height: 100px;
        background: gold;
      }

• 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

     .outer {
        position: relative;
        height: 100px;
      }
  
      .left {
        width: 200px;
        height: 100px;
        background: tomato;
      }
  
      .right {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 200px;
        background: gold;
      }