页面布局

左侧固定,右侧自适应

flex布局实现(父盒子display flex 右侧 flex=1)

 .father {
      height: 500px;
      background-color: pink;
      display: flex;
    }
    .left {
      height: 400px;
      width: 200px;
      background-color: orange;
    }
    .right {
      flex: 1;
      height: 450px;
      background-color: skyblue;
    }
复制代码

定位实现 (父盒子加padding,子盒子定位)

.father {
    height: 500px;
    background-color: pink;
    position: relative;
    padding-left: 200px;
  }
  .left {
    height: 400px;
    width: 200px;
    background-color: orange;
    position: absolute;
    left: 0;
    top: 0;
  }
  .right {
    height: 450px;
    background-color: skyblue;
  }
复制代码

bfc实现 (左侧浮动,右侧触发bfc)

.father {
      height: 500px;
      background-color: pink;
    }
    .left {
      height: 400px;
      width: 200px;
      background-color: orange;
      float: left;
    }
    .right {
      height: 450px;
      background-color: skyblue;
      /* 触发了bfc的盒子, 不与浮动的元素重叠 */
      overflow: hidden;
    }
    <!-- 
    利用bfc块级格式化上下文, 实现左侧固定右侧自适应
    1. 让左边的盒子 float: left;
    2. 让右边的盒子 overflow: hidden;

    bfc块级格式化上下文:
     1. 成为了bfc的盒子, 默认就是一个独立渲染的区域, 内部的子元素, 不会影响到外部盒子的布局
        应用: 清除浮动  塌陷
     2. 成为了bfc的盒子, 不与浮动的元素重叠
        应用: 左侧固定, 右侧自适应
              右侧固定,  左侧自适应
              两侧固定, 中间自适应  (圣杯布局, 双飞翼布局)

    触发bfc的方式
     1. float: left / right;
     2. overflow 非 visible,  hidden / auto / scroll;
     3. 定位: position: absolute / fixed;
     4. display: table / table-cell;  触发bfc, 表格布局比较特殊, 整个表格就是独立计算渲染的
   -->
复制代码

两侧固定中间自适应 (左右浮动,中间bfc)

    .left {
      float: left;
      width: 200px;
      height: 400px;
      background-color: blue;
    }
    .right {
      float: right;
      width: 200px;
      height: 400px;
      background-color: blue;
    }
    .center {
      height: 450px;
      background-color: green;
      overflow: hidden;
    }
复制代码

转载于:https://juejin.im/post/5ccff9086fb9a0322b5c0d87