三栏布局的实现方式，（一般要求尽可能多写）

两列定宽一列自适应：

1、使用 float+margin：

给 div 设置 float：left，left 的 div 添加属性 margin-right：left 和 center 的间隔 px,right 的

div 添加属性 margin-left：left 和 center 的宽度之和加上间隔

2、使用 float+overflow：

给 div 设置 float：left，再给 right 的 div 设置 overflow:hidden。这样子两个盒子浮动，另

一个盒子触发 bfc 达到自适应

3、使用 position：

父级 div 设置 position：relative，三个子级 div 设置 position：absolute，这个要计算好盒

子的宽度和间隔去设置位置，兼容性比较好，

4、使用 table 实现：

父级 div 设置 display：table，设置 border-spacing：10px//设置间距，取值随意,子级 div

设置 display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是 margin

失效，设计间隔比较麻烦，

5、flex 实现：

parent 的 div 设置 display：flex；left 和 center 的 div 设置 margin-right；然后 right 的 div

设置 flex：1；这样子 right 自适应，但是 flex 的兼容性不好

6、grid 实现：

parent 的 div 设置 display：grid，设置 grid-template-columns 属性，固定第一列第二列宽

度，第三列 auto。

对于两侧定宽中间自适应的布局，对于这种布局需要把 center 放在前面，可以采用双飞

翼布局：圣杯布局，来实现，也可以使用上述方法中的 grid，table，flex，position 实现