BFC，IFC，FFC，GFC

BFC

Block Formatting contexts(块级格式化上下文),是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
原则：每个BFC之间是独立。
哪些元素生成BFC？

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block，table-cell, table-caption, flex, inline-flex
• overflow不为visible

IFC

Inline Formatting Contexts(直联格式上下文)，line box（线框）高度由其包含行为内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin的影响）

FFC

Flex Formatting Contexts (自适应格式化上下文)display值为flex或者inline-flex的元素将会生成自适应容器（flex container）

GFC

GridLayout Formatting Context(网格布局格式化上下文)，当一个元素设置display为grid的时候，此元素将会获得一个独立的渲染区域，可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每个网格项目（grid item）定义位置和空间