Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
所以：BFC是一种按照块盒子渲染的一种渲染规则、按照块盒子的方式影响子元素定位，与其他元素的相互作用，是一个独立的块区域
css中不同的盒子类型，有不同的布局，定位等渲染规则
视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：
盒子的尺寸：精确指定、由约束条件指定或没有指定盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位文档树中的其它元素：即当前盒子的子元素或兄弟元素视口尺寸与位置所包含的图片的尺寸其他的某些外部因素该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）。
BFC特性
一个元素不能同时存在于两个BFC中
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
在BFC上下文中，每个盒子的左外侧紧贴包含块的左侧（从右到左的格式里，则为盒子右外侧紧贴包含块右侧）
元素一个接一个排列
创建BFC
根元素(<html>)浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）overflow 值不为 visible 的块元素display 值为 flow-root 的元素contain 值为 layout、content或 strict 的元素弹性元素（display为 flex 或 inline-flex元素的直接子元素）网格元素（display为 grid 或 inline-grid 元素的直接子元素）多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。BFC使用
解决浮动塌陷、margin折叠、阻止文字环绕图片、自适应布局
转载于:https://www.cnblogs.com/sisi2020/p/11232101.html
相关资源：CSS理解块级格式上下文（BFC）