左侧定宽，右侧自适应两列布局的方法总结

面试经常考的题目，现在来总结一下。

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

文章参考：https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/