圣杯布局几种方法-六种实现三栏布局的方式

圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。

六种实现三栏布局的方式

• 圣杯布局
• 双飞翼布局
• Flex布局
• 绝对定位布局
• 表格布局
• 网格布局

圣杯布局

圣杯布局从上到下分为header、container、footer，然后container部分定为三栏布局。首先给container设置overflow: hidden，使其成为一个BFC，使三栏浮动，并相对定位，给左右两个容器设置200px的宽度，中间的容器设置100%的宽度。此时left和right被相对于父元素container宽度的100%的center挤到下面。

BFC的作用是能够清除浮动的影响，避免外部元素的影响，让包含的元素能够独立地进行定位、布局。

最终样式可能会出现乱码，需要进行调整。

双飞翼布局

双飞翼布局同样分为header、container、footer。双飞翼布局给center部分包裹了一个main，通过设置margin主动地把页面撑开。给main设置margin: 0 200px，同时设置overflow: hidden使其成为一个BFC，这时窗口宽度过小时就不会出现混乱的情况了，关键点在于内容部分是包裹在main中。

Flex布局

Flex布局是由CSS3提供的一种方便的布局方式。通过设置display: flex将父元素设为弹性容器，可以轻松地实现三栏布局，还可以通过flex-shrink等属性来实现更高级的效果。

绝对定位布局

绝对定位布局的缺点是依赖于left和right的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。

表格布局

表格布局的好处是能使三栏的高度统一，但不能使center放在最前面得到最先渲染。

网格布局

网格布局是最强大的布局方式之一，能够非常方便地实现三栏布局，但目前而言，兼容性并不好。可以将页面分割成多个区域，或者用来定义内部元素的大小、位置、图层关系。仅仅四条样式命令就能轻松完成三栏布局。