自适应布局

左边固定，右边自适应布局

• 方法一：左边设置左浮动，右边宽度设置100%
• 方法二： 父容器设置 display：flex；Right部分设置 flex：1
• 方法三：设置浮动 + 在 css 中使用 calc() 函数
• 方法四：使用负margin

左右固定，中间自适应布局

1. 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。
2. 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后。
3. margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。
4. flex布局

.contain{
      display: flex;
      height: 500px;
    }
    .left{
      width:200px;
      background-color: red;
    }
    .right{
      width: 200px;
      background-color: green;
    }
    .main{
      flex: 1;
      background-color: pink;
    }

5. table布局
6. grid布局（注意兼容性）