BFC
概述
BFC： 块级格式化上下文（Block Formatting Context）
先看 MDN 的定义：
块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
简单来说，BFC 是一个独立的布局环境，BFC 内部的元素布局与外部互不影响
布局规则
- 内部的 Box 会在垂直方向一个接着一个地放置。
- Box 垂直方向上的距离由 margin 决定。属于同一个 BFC 的两个相邻的 Box 的 margin 会发生重叠。
- 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
- BFC 的区域不会与 float box 重叠。
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
- 计算 BFC 的高度时，浮动子元素也参与计算。
触发方式
即脱离文档流
常见方式：
所有方式：
0、根元素，即 HTML 元素（最大的一个 BFC）
1、浮动（float 的值不为 none）
2、绝对定位元素（position 的值为 absolute 或 fixed）
3、行内块（display 为 inline-block）
4、表格单元（display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性)
5、弹性盒（display 为 flex 或 inline-flex）
6、默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）
使用场景
1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
2、避免元素被浮动元素覆盖
3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div 的同一个 BFC 区域之内）
4、去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠
参考
什么是BFC？看这一篇就够了_Leon_94的博客-CSDN博客_bfc
更多细节参考官网：块格式化上下文 - Web 开发者指南 | MDN
IFC
IFC： 内联 (行) 格式化上下文（Inline Formatting Context）
先看 MDN：
内联格式上下文存在于其他格式上下文中，可以将其视为段落的上下文。段落创建了一个内联格式上下文，其中在文本中使用诸如
<strong>、<a>或<span>元素等内容
box model 不完全适用于参与内联格式上下文。在水平书写模式行中，水平填充、边框和边距将应用于元素，并左右移动文本。但是，元素上方和下方边距将不适用。应用垂直填充和边框可能会在内容的上方和下方重叠，因为在内联格式上下文中，填充和边框不会将行框撑开。
strong {
margin: 20px;
padding: 20px;
border: 5px solid rebeccapurple;
}<p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>参考
Introduction to formatting contexts 格式化上下文简介 - CSS（层叠样式表） | MDN
贡献者
jiechen