BFC（块级格式化上下文）和IFC（内联格式化上下文）

BFC定义

BFC（Block Formatting Context, 块级格式化上下文）是CSS中的一种渲染机制，它决定了元素如何布局和渲染。
BFC是页面上的一个隔离的区域，其中布局不会受外部的元素所影响，并且内部的元素也不会影响到外部元素的布局。

BFC触发情况

BFC的创建通常由以下几种情况触发：

• 浮动元素（元素的float不为none）
• 绝对定位元素（元素的position为absolute或fixed）
• inline-blocks元素
• table-cells（display:table-cell,<td>和<th>）
• table-captions()（display:table-caption,<caption>）
• 块级元素（如<div>）使用overflow属性，并且它的值不为visible（hidden、auto,scroll）

BFC特点

BFC的特点包括：

• 清除浮动：BFC内的元素不会和BFC外的浮动元素重叠。
• 合并间距：BFC内的元素在垂直方向上的外边距会发生重叠。例如：上面的divmargin-bottom:20px;,下面的divmargin-top：30px;,此时两div的边距以大的为主，即30px。

IFC定义

IFC（Inline Formatting Context, 内联格式化上下文）是另一种css渲染机制，用于渲染内联元素。
IFC主要用于处理文本和其他内联元素的布局。

IFC特点

IFC的特点包括：

• 元素在水平方向上排列
• 元素的宽度由内容决定
• 元素的高度由行高决定
• 元素的外边距和内边距在水平方向上有效，垂直方向上无效

BFC和IFC的区别

BFC和IFC的主要区别点：

• 布局方向：BFC是块级元素的布局，IFC是内联元素的布局
• 元素类型：BFC通常由块级元素创建，IFC由内联元素创建
• 外边距处理：BFC中的垂直外边距可能会折叠，IFC的垂直外边距不会
• 浮动元素：BFC可以包含浮动，IFC的浮动元素会影响其布局
• 溢出处理：BFC的移除元素会影响其布局，IFC的溢出元素不会影响其布局