无论是圣杯布局，还是双飞翼或者其他布局，考验的都是对渲染规则Formatting context的理解，几乎四种渲染规则都可以实现两栏布局：

面试题三:实现左右两栏布局的方式有哪些？-QUI-Notes

1.IFC——行内格式化上下文，将内部两列盒子都改用 行内块，然后对齐方式改为顶部对齐；

.left,.right{display:inlin-block;vertical-align: top;}

2.BFC——块级格式化上下文，左右浮动都可以，父盒子开启块级化上下文布局；

.box{display:block;overflow: hidden;}
.left,.right{float:left/right}

3.FFC——弹性格式化上下文，父盒子开启Flex弹性布局，子元素顶部对齐，左右开头或结尾对齐都可以，子元素可以通过flex设置空间大小；

.box{display:flex;justify-content: flex-start;align-items: flex-start}

4.GFC——网格格式化上下文，父盒子开启Grid网格布局，父盒子设置子列宽度；

.box{display: grid;grid-template-columns:200px auto}

另外还可以采用定位+渲染规则，注意因为position定位会打破页面流式渲染顺序，导致布局重绘，再加上position定位有层级优势，将页面纵向拉伸，变相给页面做了扩容！

5.position+BFC/IFC，父盒子采用块级/行内布局，并开启相对定位，左侧默认继承布局方式，右侧定位；反之也可以！

.box{display:block;overflow: hidden;position: relative;}
.left{float:left}
.right{position: absolute}