7种css左边固定，右边自适应及优缺点

公共样式

      <style>
        .left {
            width: 100px;
            background: red;
        }
        .right {
            background: yellowgreen;
        }
    </style>
    <div class='container'>
        <div class='left'>我是左侧，固定宽度为100px</div>
        <div class='right'>我是右侧，宽度自适应，多多指教</div>
      </div>

1. float+margin-left方案

.left-float { float: left }
.right-margin{margin-left: 120px;}
.container-float {overflow:hidden} // 父元素清除浮动
缺点：
需要清除浮动
需要计算右侧盒子的margin-left

2. 两个子元素浮动

.float { 
float: left; 
box-sizing: border-box;
} // 子元素
.container-clearfix {
   overflow:hidden; 
   box-sizing: content-box
;} // 父元素清除浮动
.calc-right{  width: calc(100% - 120px);  } // 右侧元素

缺点：
需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing。

父元素需要清除浮动

3. 左侧设置position: absolute;右侧设置margin-left方法

        .positon-left{
            position: absolute;
        }
        .right-margin{
            margin-left: 100px;
        }
       缺点:

使用了绝对定位，若是用在某个div中，需要更改父容器的position。

没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况

4 使用弹性盒子flex布局

        .container-flex {
            display: flex;
            align-items: flex-start; // 让子元素高度自适应
            /* justify-content: flex-start; */设置这个属性会让右侧的盒子跟左侧盒子的          高度一样高
        }
        .left-flex {
            flex: 0 0 auto;
        }
        .right-flex{
            flex: 1 1 auto
        }
        
        代码简洁，一般推荐这种写法
       缺点：
      IE低浏览器的兼容性不是很好，不过现在ie浏览器在整个浏览器的市场份额不是很大，用Google浏览器比较多，除非公司有特殊要求要兼容低版本ie

5 使用grid布局

        .container-grid {
            display: grid;
            grid-template-columns: 100px 1fr;
            align-items: flex-start;
        }
        .left-grid, .right-grid {
            box-sizing: border-box;
        }
        .left-grid { 
            grid-column: 1;
        }
        .right-grid {
            grid-column: 2;
        }
      这种新的布局方式跟flex布局有些类似，可以试着用下，不懂得话，可以看阮一峰的教材
      链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

6 使用inline-box方式布局

        .inline-block { // 两个子元素设置样式
            display: inline-block;
            vertical-align: top;
            font-size: 14px;
            box-sizing: border-box;
        }
        .container-block {
            box-sizing: content-box;
            font-size: 0;
        }
        .inline-right { //右侧的宽度 
            width: calc(100% - 100px);
        }
    缺点：
    需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing

    需要消除空格字符的影响

    需要设置vertical-align: top满足顶端对齐

7 . 使用float+BFC方法，左边设置float：left，右侧是设置oveflow:hidden

        .container-bfc {
            overflow: hidden;
        }
        .bfc-left {
            float: left;
        }
        .bfc-right {
            margin-left: 0;
            overflow: hidden;
        }
        缺点：
        父元素需要清除浮动