在网页布局中，以前只考虑了两列、三列的布局方式，但是没有过多的去考虑在两列、三列布局的情况下实现某些自适应的情况；今天遇到这个问题，在这里mark一下；
方法一：左侧元素浮动或者绝对定位的方式脱离文档流，让两个块级元素能够在同一行显示。然后margin-left的值设置为左侧元素的宽度；在这里利用了div的一个默认规则，div没有设置宽度的情况下会继承父元素的宽度；如果用p等其他标签达不到此效果；
无标题文档
效果图：
方法二：利用BFC（块级格式化上下文）来防止蚊子环绕的原理来实现；BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响，它可以通过多种方式来创建：
1.float不为none；
2.position不为static或者relative；
3.display为table-cell，table-caption，inline-block，flex或者inline-flex中的其中一个都可；
4.overflow不为visible；
关于BFC，W3C等资料是这样描述的：在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式化时，则为右边框紧挨）。即使在浮动里也是这样的（尽管一个包含块的边框会因为浮动而萎缩），除非这个包含块的内部创建了一个新的BFC。这样，当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左边框的右边框；
无标题文档
效果：
注：在测试过程中遇到一个问题，去掉box2的overflow：auto；属性，右侧的div也能达到自适应的效果。自适应的盒子是否需要在设置BFC还有待更一步确认；
方法三：利用display:table;的方式实现；父元素设置display:table;宽度100%，左右盒子设置display:table-cell;，左侧固定的盒子设置宽高，右侧自适应的盒子设置高度即可；
无标题文档
效果：
