左列定宽，右列自适应

方法1.浮动+margin实现

  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>

  .left {
      width: 300px;
      height: 50vh;
      background-color: yellowgreen;
      float: left; 
    }

    .right {
      height: 100vh;
      background-color: skyblue;
      margin-left: 300px;
    }

如不加margin-left运行代码后，蓝色的盒子有一部分被压在了绿色盒子下面。加上后 实现两栏布局

方法2：浮动+BFC

.left {
      width: 300px;
      height: 50vh;
      background-color: yellowgreen;
      float: left; 
    }

    .right {
      height: 100vh;
      background-color: skyblue;
      /* 触发BFC */
      overflow: hidden;
    }

方法3：定位

.container {
      position: relative;
    }
    .left {
      position: absolute;
      left: 0;
      width: 300px;
      height: 50vh;
      background-color: yellowgreen;
    }

    .right {
      height: 100vh;
      background-color: skyblue;
      margin-left: 300px;
    }

或者

.container {
      position: relative;
    }
    .left {
      position: absolute;
      left: 0;
      width: 300px;
      height: 50vh;
      background-color: yellowgreen;
    }

    .right {
      position: absolute;
      left: 300px;
      right: 0;
      height: 100vh;
      background-color: skyblue;
    }

方法4：使用flex布局

  .container {
      display: flex;
      height: 50vh;
    }
    .left {
      width: 300px;
      background-color: yellowgreen;
    }

    .right {
      /* 填充剩余空间 */
      flex: 1;
      background-color: skyblue;
    }

5.浮动+负外边距

  <div class="container">
    <div class="left"></div>
    <div class="right">
      <div class="content"></div>
    </div>
  </div>

 .left {
      width: 300px;
      height: 50vh;
      background-color: yellowgreen;
      float: left;
      margin-right: -100%;
    }

    .right {
      width: 100%;
      float: left;
    }

    .content {
      margin-left: 300px;
      height: 100vh;
      background-color: skyblue;
    }

左列不定宽，右列自适应

方法1：flex布局

.container {
     display: flex;
    height: 50vh;

   }

   .left {
    flex: 0.2;/*可以不加 靠内容撑开左边的盒子*/
    background-color: greenyellow;
   }

   .right {
     flex: 1;
    background-color: skyblue;
   }

方法2：浮动+BFC

去掉宽度设置即可 左边栏的大小 靠内容撑开

.left {
      height: 50vh;
      background-color: yellowgreen;
      float: left; 
    }

    .right {
      height: 100vh;
      background-color: skyblue;
      /* 触发BFC */
      overflow: hidden;
    }

  <div class="container">
    <div class="left">这是左边</div>
    <div class="right"></div>
  </div>