一、两栏布局，右侧自适应
方法一：使用flex布局
将box父盒子的display属性设置为flex,左栏的宽度按需设计，右栏添加flex:1属性
关于flex:1的解释
flex :1 是flex-grow:1 flex-shrink: 1 flex-basis:0的缩写。
flex-grow:1 将自身的宽度扩大2倍，如果其余的同级盒子没有设置该属性，最后一个盒子如果设置该属性后则会自动填满父盒子。
flex-shrink:1 将自身的宽度缩小为原来的二分之一，如果第一个子盒子的宽度特别大，超出的父盒子的宽度，剩余盒子设置flex-shrink:1 属性之后，会自动缩小自身的宽度来适应前面的盒子宽度。
flex-basis:0(这个属性不是很明白能干嘛)
方法二：使用float布局
1、使用flaot左浮左边栏
2、右边栏用margin-left隔开
3、为父元素田间BFC，防止下方的元素飞到上方内容
关于BFC的解释
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
创建一个BFC的通常使用 overflow：hidden来创建
应用场景
１、属于同一BFC的两个相邻块元素的margin会发生重叠，要避免这种情况，可以新创建一个BFC，让这两个相邻块元素处于不同的BFC；
２、当父盒子的宽度没有设置的时候，设置父盒子的背景颜色是无法显示的，即使父盒子里面有子盒子占据空间，这时候给父盒子设置一个BFC，父盒子就可以显示了。
３、对于浮动元素，可能会造成文字环绕的情况(Figure1)，但这并不是我们想要的布局(Figure2才是想要的)。要解决这个问题，我们可以用外边距，但也可以用BFC。
４、在多列布局中使用BFC
如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。
如果没有在最后一个设置BFC，则最后一个会掉下来落在第一个盒子的下面。
二、三栏布局中间自适应
方法一：使用flex布局
为父盒子添加display:flex，设置左右两边盒子的宽度，中间盒子设置flex:1或者width：100%即可架构剩下的空间填满。
方法二： 两边使用float,中间使用margin
注意：中间的盒子要放在最后面，否则右边的盒子会掉下来
缺陷：右边在主题内容之前，如果是响应式布局，则不能实现简单的换行展示。
方法三：两边使用绝对定位，中间使用margin
和flaot布局相似