BFC与IFC

定义

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域（用于决定块盒子的布局及浮动相互影响范围的一个区域）。

下列方式会创建块格式化上下文：

根元素（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 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

BFC的布局规则

内部的Box会在垂直方向一个接着一个地放置。
Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动子元素也参与计算。

BFC可以解决的问题

1.相邻块级盒子上下边距塌陷的问题
2.浮动盒子遮挡下面盒子文本内容的问题
3.浮动元素令父元素高度坍塌的问题
4.设计两栏宽度自适应
例子：
https://zhuanlan.zhihu.com/p/127187654

IFC定义

内联格式化上下文，内联元素在页面上布局发生的区域。

创建IFC的条件

块级元素中仅包含内联级别元素

特性

• 行内元素总是会应用IFC渲染规则
• 只计算横向样式空间，不计算纵向样式空间。
• 水平排列规则根据IFC容器的text-align值来排列，可以用来实现多个子元素的水平居中。
• IFC中具备float属性值的元素优先排列，在很多场景中用来在文章段落开头添加“tag”可以用到。
• 块框内部，对于文本这类的匿名元素，会产生匿名行框包围，而行框内部就应用IFC渲染规则
• 另外，inline-block，会在元素外层产生IFC（所以这个元素是可以通过text-align水平居中的），当然，它内部则按照BFC规则渲染

参考博文：https://segmentfault.com/a/1190000017273573