BFC概念
BFC 即 Block Formatting Contexts (块级格式化上下文)，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
触发bfc
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
特性
特性1、 同一个 BFC 上下margin会重叠,取最大的margin值。
解决方法: 利用bfc特性，让其元素 添加一层div, 设置为overflow: hidden; 使它形成一块独立的bfc.
特性2、 BFC可以包含浮动元素。
浮动元素会脱离文档流，父元素没有高度，造成父高度塌陷。 父元素设置成BFC 可以解决
特性3、BFC的区域不会与浮动容器发生重叠
如图
给右元素添加overflow: hidden;形成BFC。
谈谈IFC
IFC（inline Formatting Context）叫做“行级格式化上下”
局规则如下：
1.内部的盒子会在水平方向，一个个地放置；
2.IFC的高度，由里面最高盒子的高度决定；
3.当一行不够放置的时候会自动切换到下一行
GFC（GrideLayout formatting contexts）：网格布局格式化上下文
当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间
FFC（Flex formatting contexts）:自适应格式上下文
display值为flex或者inline-flex的元素将会生成自适应容器（flex container）
