BFC IFC GFC FFC

[Lawguancong]

BFC Block Formatting Contexts (块级格式化上下文)

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。 块级格式上下文，一句话来说就是让块级元素有块级元素该有的样子，触发BFC可以清除浮动、让margin不重叠。

常见定位方案

• 普通流 (normal flow) / 文档流
• 浮动 (float)
• 绝对定位 (absolute positioning)

  创建 BFC 的方式有：

• html 根元素
• float 浮动
• 绝对定位
• overflow 不为 visiable
• display 为表格布局或者弹性布局
• display为inline-block,table-cell,table-caption
• overflow值不为visible
• 弹性元素(flex布局)
• 网格元素(grid布局)

  BFC 主要的作用是：

• 防止同一 BFC 容器中的相邻元素间的外边距重叠问题
• BFC 可以包含浮动的元素（清除浮动）
• BFC 可以阻止元素被浮动元素覆盖（margin、上下margin）

margin重叠

• 外边距的重叠只产生在普通流文档的上下外边距之间
• 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
• 左右边距（无）

解决方法

• overflow
• position:absolute
• display:inline-bloc

其它

ifc: 内联格式化上下文 https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#inline-formatting

gfc：网格格式化上下文 display: grid

ffc: 弹性格式化上下文 display: flex

参考链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing https://zhuanlan.zhihu.com/p/343613321 https://zhuanlan.zhihu.com/p/25321647 https://juejin.cn/post/6844903495108132877 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/122