常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是，利用CSS中的新型布局flex layout与grid layout。

双inline-block布局--左侧30%，右侧70%

双inline-block布局--左侧固定宽度：200px，右侧自适应

双inline-block布局--左侧自适应，右侧固定宽度：200px

双float布局--左侧30%，右侧70%

双float布局--左侧固定宽度：200px，右侧自适应

双float布局--左侧自适应，右侧固定宽度：200px

float + margin-left布局--左侧30%，右侧70%

float + margin-left布局--左侧固定宽度：200px，右侧自适应

float + margin-left布局--左侧自适应，右侧固定宽度：200px

absolute + margin-left布局--左侧30%，右侧70%

absolute + margin-left布局--左侧固定宽度：200px，右侧自适应

absolute + margin-left布局--左侧自适应，右侧固定宽度：200px

上面的方法都需要通过左侧盒子的宽度，计算某个值，下面三种方法都是不需要计算的。只需要设置两个盒子之间的间隔。

flex布局--左侧30%，右侧70%

flex布局--左侧固定宽度：200px，右侧自适应

flex布局--左侧自适应，右侧固定宽度：200px

float + BFC布局--左侧30%，右侧70%

float + BFC布局--左侧固定宽度：200px，右侧自适应

float + BFC布局--左侧自适应，右侧固定宽度：200px

grid布局--左侧30%，右侧70%

grid布局--左侧固定宽度：200px，右侧自适应

grid布局--左侧自适应，右侧固定宽度：200px