两栏布局的几种方法

两栏布局左自适应右固定。

（1）左浮动，右固定

左边浮动，右边利用margin - left将右边的盒子顶出去，自适应添加了剪切效果

    .main{
        padding: 0;
        margin: 0;
        height: 100px;
    }
    .left{
        float: left;
        width:100px;
        height: 100px;
        background: red;
        font-size: 10px;
    }
    .right{
        width: auto;
        height: 100px;
        margin-left: 110px;
        background: aqua;
        overflow: hidden;/*右边自适应内容出框后，直接裁剪掉*/
    }

（2）弹性盒子
利用flex进行两栏布局时，我们要知道flex-shrink 、flex-grow、flex-basis的用法。flex-basis是前两个元素的基础。这里的overflow添加了滑动块属性。

 .main{
        display: flex;
        height: 100px;
    }
    .left{
        
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: 100px;//与flex：0 0 100px；等效
        background: red;
        font-size: 10px;
    }
    .right{
        flex: auto;
        height: 100px;
        margin-left: 10px;
        background: aqua;
        overflow: scroll;
      
    }

（3）position：absolute
父级元素设置相对定位，左边元素设置绝对定位，宽度固定右边，基于左边的宽度加一个间距。和float有些类似。

• 和float一样，右边无限小时会被隐藏

.main{
        position: relative;
        height: 100px;
    }
    .left{
        display: block;
        position: absolute;
        width: 100px;
        height: 100xp;
        background: red;
        font-size: 10px;
    }
    .right{
        height: 100px;
        margin-left: 110px;
        background: aqua;
      
    }

（4）右边绝对定位
这种方法待定，感觉右边的框没有自适应

 .main{
        position: relative;
        height: 100px;
    }
    .left{
        width: 200px;
        height: 100px;
        background: red;
    }
    .right{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 200px;
        
        background: aqua;
      
    }

（5）双inline-block
给左右两盒子都设置成行内块，使其水平排列，但是因为要将左右盒子的border+padding+margin算进去，所以要添加一个box-sizing：border-box和box-sizing：content-box；，让其缩回父元素宽度。在输入div标签时因为换了行导致两个盒子中间多出来了4个像素，所以这里要设置一个font-size清除空隙。

• 但这样设置后，右侧盒子会流动到下一行

	*{
	padding:0;
	margin:0;
	}//清除浏览器默认的边距
	    .main{
        overflow：hidden；
        height: 100px;
        font-size;0;
    }
    .left{
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        width: 200px;
        height: 100px;
        background: red;
    }
    .right{
        box-sizing: border-box;
        width: calc(100%-200px);
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        height: 100px;
        background: aqua;
      
    }

（6）float+BFC方法
左边浮动，右边和字通过overflow形成了BFC，右侧盒子不会与浮动的元素重叠，自适应是因为右侧的盒子是块元素

• 会掉落到下一行

*{
        padding: 0;
        margin: 0;
    }
    .main{
        overflow: auto;
    }
    .left{
        float: left;
        margin-right: 20px;
        width: 200px;
        height: 100px;
        background: red;
    }
    .right{
        margin-left: 0;
        overflow: auto;
        background: aqua;
    }

（7）grid方案，最新的解决方案
需要默认列等高，在使用margin-left的时候，grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离。

*{
        padding: 0;
        margin: 0;
    }
    .main{
        display: grid;
        grid-template-columns: 220px 1fr;
        align-items: start;
    }
    .left{
        box-sizing: border-box;
        grid-column: 1;
        width: 200px;
        height: 100px;
        background: red;
    }
    .right{
        box-sizing: border-box;
        grid-column: 2;
        background: aqua;
    }