共计 1239 个字符，预计需要花费 4 分钟才能阅读完成。
介绍下 BFC 及其利用
定义
BFC（Block Formatting Context）翻译为『块级格式化上下文』。是一个独立的渲染区域，只有（Block-level box）块级 盒子 参加，BFC 规定了外部盒子如何布局，以及盒子之间的关系和作用。
解释阐明
Box(盒子)
Box 盒子是 CSS 布局的根本单位，在 CSS 中咱们宽泛的应用两种『盒子』——块级盒子和内联盒子。HTML 元素的类型和 display 属性，决定了一个 Box（盒子）的类型。不同类型的 Box（盒子），会参加不同的 Formatting Context（格式化上下文）。
Formatting Context(格式化上下文)
Formatting Context（格式化上下文）是页面中的一块渲染区域，它决定了子元素将如何布局，以及子元素之间的关系和作用。
Block Formatting Context，块级格式化上下文，是 Formatting Context（格式化上下文）的一种类型，只有（Block-level-box）块级盒子参加；绝对应有 Inline Formatting Context（IFC 内联格式化上下文）。CSS3 之后，还有 GFC（Grid）和 FFC（Flex）。
规定
- 外部的 box 会依照垂直方向叠放
- BFC 是页面上一个被隔离的容器，BFC 外部的子元素布局不会影响到里面的元素布局。
- 外部的 box，垂直方向的间隔由 margin 来管制。
- 外部相邻 Box 的 margin 会产生重叠。
- BFC 的区域不会与 float box 重叠
- 计算 BFC 的高度时，浮动元素也参加计算
利用
- 革除浮动（让浮动元素的父级触发 BFC）
- 阻止同一个 BFC 内 box 外边距合并
- 自适应两栏布局
- 阻止元素被（float）浮动元素笼罩
如何创立(触发)BFC
- 根元素
- 浮动元素
- 定位元素
- 行内块元素
- 表格单元格
- 表格题目
- overflow 不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content 或 paint 元素
- 弹性元素 flex 布局元素的间接子元素
- 多列容器 grid 布局元素的间接子元素
- …
总结
BFC 块级格式化上下文，简略来说是一个关闭的区域，这区域外面的盒子不会影响区域里面的布局。BFC 区域内的盒子须要恪守一些布局规定，比方：盒子会依照垂直方向排，盒子垂直方向的间隔由 margin 管制，BFC 区域不与浮动框重叠，计算 BFC 的高度时，浮动元素也参加计算等。依据 BFC 的布局规定，BFC 能够解决革除浮动，外边距合并等异样布局，也能够实现自适应两栏布局，阻止元素被浮动元素笼罩。创立(触发)BFC 的条件有给元素增加 overflow 属性且值不为 visible，float 属性且值不为 none，display 属性值为：flow-root,inline-block,table-cell,table，table-row，flex，grid 等。
参考链接
CSS of BFC
it 邦——BFC
BFC in Css
https://www.programmersought.com/