面试题---CSS的7种方法实现三栏布局（经典）

要求

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

方案：float布局，absolute布局，表格布局，grid布局，flex布局，双飞翼布局，圣杯布局（共7种）

float布局

做法：左右两侧部分分别左右浮动，中间容器要设置的左右margin为左右两侧分别的宽度

注意：在中间的div区域要放到最前面进行渲染

优点：比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的

缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等

absolute布局

做法：对左中右三个区域部分都设置绝对定位，左边区域设置left为0，右边区域设置right为0，中间部分设置的left和right分别是左右区域的宽度

优点：很快捷，设置很方便，而且也不容易出问题

缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的

table布局

做法：对包裹的父容器设置display：table，对左中右区域分别设置display：table-cell

优点：实现简单，代码少

缺点：当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的

grid布局

做法：对包裹的父容器设置display：grid，并且设置grid-template-columns：左边宽度 auto（中间宽度自动） 右边宽度，grid-template-rows: 各区域高度

注意：在中间的div区域要放到中间进行渲染

优点：简单快捷(可以随意组合，其一高度发生变化，另外模块也不会进行跟着变化)

缺点：不支持IE10以下

flex布局

做法：对包裹的父容器设置display：flex，设置中间的区域为flex：1

注意：在中间的div区域要放到中间进行渲染

优点：简单快捷(在不设置高度情况下，min-height除外，那么其一块高度发生变化，其它块高度也会发生变化)

缺点：不支持IE10以下

圣杯布局（通过左浮动加相对定位实现）

做法：对包裹的父容器设置padding（给左右两区域留出位置）。对中间区域设置宽度为100%
     对左中右区域设置position：relative，左区域的left：-左区域宽度，margin-left：-100%。右区域的right：-右区域宽度，margin-left：-右区域宽度（左右区域占据了父容器的padding部分）

注意：最好给body设置一个最小宽度

优点：结构简单，无多余dom层

缺点：中间部分宽度小于左侧时会发生混乱

双飞翼布局（通过左浮动配合margin实现）（是对圣杯布局的改进）

做法：对左中右区域都设置左浮动，对于中间区域用一个容器包裹着，并设置宽度为100%。中间包裹的子区域，设置左右margin为左右区域的宽度（给左右两区域留出位置）
      设置左边区域的margin-left：-100%，设置右边区域的margin-left：-右区域宽度（左右区域所占据的空间是中间区域的margin空间）

注意：对于中间的区域一定要有个容器包裹着

优点：支持各种宽高变化，通用性强

缺点：多了一层包裹中间区域的代码(增加渲染树的计算量)，三栏高度不统一

延伸问题

若高度不固定，则可以使用哪种布局
方案：flex布局，grid布局，table布局