7、如何实现双飞翼(圣杯)布局?(必会)

1、利用定位实现两侧固定中间自适应

（1.1）父盒子设置左右 padding 值

（1.2）给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

（1.3）中间盒子自适应

具体 CSS 代码：

html 结构：

2、利用 flex 布局实现两侧固定中间自适应

（2.1）父盒子设置 display:flex;

（2.2）左右盒子设置固定宽高

（2.3）中间盒子设置 flex:1 ;

具体 CSS 代码：

html 结构：

3、利用 bfc 块级格式化上下文, 实现两侧固定中间自适应

（3.1）左右固定宽高，进行浮动

（3.2）中间overflow: hidden;

具体 CSS 代码：

html 结构：