面试之BFC布局||圣杯布局||双飞翼布局

本文主要是介绍面试之BFC布局||圣杯布局||双飞翼布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、BFC布局
BFC，即Block Formatting Contexts（块级格式化上下文），具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
1、BFC 布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
2、触发BFC
只要元素满足下面任一条件即可触发BFC特性：
body根元素
浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex
二、圣杯布局
1、圣杯布局就是三栏布局，按照理解目的就是两边宽度固定，中间宽度自适应。
在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。
代码详解：
html代码中 middle部分首先要放在父容器container的最前部分，因为在页面展示的时候希望是让中间部