两列布局

两列布局

<div class="container">
    <div class="left">左边定宽</div>
    <div class="right">右边自适应</div>
</div>

• 方案一：浮动实现

  .left{
      float: left;
      width: 300px;
      background-color: cornflowerblue;
  }
  .right{
      overflow: auto;
      background-color: red;
  }
  /*overflow 的默认值是 visible，超出也显示；值为 auto 的意思是如果超出了我会给你安排一个滚动条。overflow 不为 visible 就会生成BFC，因为有规定：BFC的区域不会与浮动的元素重叠（就是浮动元素不会覆盖在BFC上面）*/
  

  这里顺便说一下 BFC 吧：

  它有一套属于自己的渲染规则，是一个独立的布局环境，BFC内部的元素布局与外部互不影响

  BFC 的特点：

  1. BFC 的区域不会被浮动的元素覆盖
  2. 计算 BFC 的高度时，若它里面有浮动元素，那么浮动元素也参与计算。

  哪些元素会生成 BFC（这里我先说三个，我的意思是先记住这三个再说⛱️）：

  1. 根元素
  2. 脱离标准流的都会
  3. overflow不为visible

• 方案二：弹性布局实现

  .container{
      display: flex;
  }
  .left{
      flex-basis: 200px;
      flex-shrink: 0;
      background-color: cornflowerblue;
  }
  .right{
      background-color: gray;
      flex-grow: 1;
  }
  /*flex-shrink: 0;是不缩小；flex-grow: 1;是撑满剩余空间*/