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

面试题三:实现左右两栏布局的方式有哪些?-Qui-Note

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}