两栏布局的几种方法

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

（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; }