BFC、IFC、GFC 和 FFC，BFC块级格式化上下文(block formatting context),创建和作用

BFC、IFC、GFC 和 FFC

BFC ：块级格式上下文，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。

IFC ：行内格式化上下文，将一块区域以行内元素的形式来格式化。

GFC ：网格布局格式化上下文，将一块区域以 grid 网格的形式来格式化。

FFC ：弹性格式化上下文，将一块区域以弹性盒的形式来格式化。

BFC创建和作用

它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

创建规则

• html标签，根元素
• 浮动元素 ( float 不取值为 none )
• 绝对定位元素 ( position 取值为 absolute 或 fixed )
• display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex 之一的元素
• overflow 设置为 auto、scroll、hidden，取值不为 visible 元素

BFC作用

可以包含浮动元素(解决浮动元素令父元素高度坍塌的问题)
不被浮动元素覆盖(解决非浮动元素被浮动元素覆盖问题)
阻止父子元素的 margin 折叠(解决外边距垂直方向重合的问题)

总结

所谓 BFC，块级格式上下文，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。
IFC，行内格式化上下文，将一块区域以行内元素的形式来格式化。
GFC ，网格布局格式化上下文，将一块区域以 grid 网格的形式来格式化。
FFC ，弹性格式化上下文，将一块区域以弹性盒的形式来格式化。

持续学习总结记录中，回顾一下上面的内容：
BFC、IFC、GFC 和 FFC，BFC块级格式化上下文(block formatting context),BFC创建和作用？