面试过程中总会文档两列布局，左边等宽，右边自适应几种方法？以下提供6种为君解忧
<div id="wrap"><div id="left"></div><div id="right"></div>
</div>需求就是左侧定宽，右侧自适应。（height先不用管）
方法一：双inline-block
#wrap{width: 100%;font-size: 0;
}
#left{width: 200px;height: 100px;display: inline-block;
}
#right{height: 100px;width: calc(100% - 200px);display: inline-block;
}缺点：为消除html中空格的影响需要把父级的font-size设为0
如果两边高度不一样，需要加vertical-align: top注意：calc表达式内运算符两边要有空格方法二：双float
#left{float: left;width: 200px;height: 100px;
}
#right{float: left;height: 100px;width: calc(100% - 200px);
}本方案和双inline-block方案原理相同，都是通过动态计算宽度来实现自适应。但是，由于浮动的block元素在有空间的情况下会依次紧贴，排列在一行，所以无需设置display: inline-block;，自然也就少了顶端对齐，空格字符占空间等问题。A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.缺点：父元素需要清除浮动方法三： float+margin-left
#left{float: left;width: 200px;height: 100px;
}
#right{height:100px;margin-left: 200px;
}上面两种方案都是利用了CSS的calc()函数来计算宽度值。下面两种方案则是利用了block级别的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。block级别的元素会认为浮动的元素不存在，但是inline级别的元素能识别到浮动的元素。缺点：需要清除浮动,需要计算margin-left
方法四：absolute+margin-left
#left{position: absolute;width: 200px;height: 100px;
}
#right{height: 100px;margin-left: 200px;
}缺点：使用了绝对定位，若是用在某个div中，需要更改父容器的position。
方法五：float+BFC
#wrap{overflow:hidden;
}
#left{width: 200px;height: 100px;float: left;
}
#right{height: 100px;margin-left: 0;overflow: auto;
}这种方法同样是利用了左侧浮动，但是右侧盒子通过overflow:auto;形成了BFC，因此右侧的盒子不会被浮动的元素重叠。
缺点：父元素需要清除浮动。
方法六：flex布局
#wrap{display: flex;
}
#left{width: 200px;height: 100px;
}
#right{height: 100px;flex: 1;
}
)