说一说BFC

【什么情况下可以让元素产生BFC】
1、float属性不为none
2、position为absolute或fixed
3、display为inline-block、table-cell、table-caption、flex、inline-flex
4、overflow不为visible

【BFC元素具有的特性】
1、在BFC中，盒子从顶部开始垂直地一个接一个排列
2、盒子垂直方向的距离由margin决定。同一个BFC的两个相邻盒子margin会重叠
3、BFC中，margin-left会触碰到border-left（对于从左至右的方式，反之）
4、BFC区域不会与浮动的盒子产生交集，而是紧贴边缘浮动
5、计算BFC高度时，自然会检测浮动的盒子高度

【主要用途】
1、清除内部浮动，父元素设置为BFC可以清除子元素的浮动（最常用overflow:hidden，IE6需加上*zoom:1）：计算BFC高度时会检测浮动子盒子高度
2、解决外边距重叠问题

IFC（Inline formatting contexts）：内联格式上下文。IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。

GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。

FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。