# 两栏布局

常用的后台布局方式。左侧固定,右侧宽度自适应屏幕。

# 实现方式

  1. BFC。运用 BFC 不和 float 块重叠的特点
  2. position 布局。right 块 absolute,让 left 为right的宽度
  3. 自适应布局。right 不设置宽度。用 margin 撑开左边边距。
  4. flex 布局。right 设置 flex=1.left 设置 flex-shrink:0;
  5. 运用 css 函数 calc。自动计算右侧的宽度。设置 right 的 width:calc(100% - left.width)。

# 代码实现

  <div class="float-box">
    <div class="aside"></div>
    <div class="main"></div>
  </div>
  • BFC
  .float-box {
    position: relative;
  }

  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
  }

  .main {
    height: 200px;
    background: #fcc;
    overflow: hidden;
  }
  • postion 布局
  .float-box {
    position: relative;
  }

  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
  }

  .main {
    height: 200px;
    background: #fcc;
    position: absolute;
    left: 100px;
    right: 0;
  }
  • 自适应布局
      .float-box {
        position: relative;
      }
    
      .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
      }
    
      .main {
        height: 200px;
        margin-left: 100px;
        background: #fcc;
      }
  • flex 布局
  .float-box {
    display: flex;
    justify-content: flex-start;
  }

  .aside {
    width: 100px;
    height: 150px;
    background: #f66;
    flex-shrink: 0;
  }

  .main {
    height: 200px;
    background: #fcc;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
  }
  • cacl 计算
  .float-box {
    position: relative;
  }

  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
  }

  .main {
    float: left;
    height: 200px;
    background: #fcc;
    width: calc(100% - 100px)
  }