包含块、BFC、IFC
这篇我们系统地讲解下 CSS 布局的核心概念——包含块、格式化上下文、块格式化上下文（BFC）、行内格式化上下文（IFC）；这四个概念是理解 CSS 布局的基石。我们依次来看下：
一、包含块
这是计算元素尺寸和位置的基础参考系。一个元素的尺寸和位置（尤其是百分比值）的计算，都依赖于一个被称为“包含块”的矩形区域
1. 什么是包含块？
一个元素的大小和它在页面上的位置，通常是参考它最近的父级大盒子来计算的。这个父级大盒子就是包含块。不过，大多数情况下是最近的父块元素，但有些特殊情况会不一样。
2. 如何确定包含块？
确定包含块的规则完全依赖于元素的 position 属性：
static、relative、sticky：包含块是最近的祖先块容器的内容区。absolute：包含块是最近的position值非static的祖先元素的内边距区。fixed：包含块通常是视口（viewport）。- 根元素
<html>的包含块是一个特殊的初始包含块。
3. 为什么它重要？
当对 width, height, padding, margin, top, left等属性设置百分比值时，这些百分比的计算值正是通过其包含块的对应尺寸计算得来的。
那在包含块内部，元素该如何排列呢？这就涉及到了格式化上下文的概念。
二、格式化上下文
格式化上下文可以理解为页面中的一个“独立小环境”，在这个环境里，子元素会按照特定的布局规则进行排列。每个格式化上下文都有自己的一套布局方式，决定了里面的内容如何显示和相互影响。
1. 有哪些类型？
- 块格式化上下文（BFC）：按照块布局规则布局子元素。
- 行内格式化上下文（IFC）：按照行内布局规则布局子元素。
- 弹性格式化上下文：按照弹性盒模型规则布局子元素。
2. 文档的起点
- 文档最外层的元素（
<html>）使用块布局规则，这被称为初始块格式上下文。
通过“格式化上下文”这个概念，可以理解网页其实是由多个彼此独立、各自有规则的“小布局环境”拼接而成的。其中，BFC 和 IFC 是最基础的两种格式化上下文，下面分别介绍它们的原理和应用。
三、块格式化上下文（BFC）
BFC 是 Web 页面渲染的一部分，是块级盒子布局发生的区域，也是浮动元素与其他元素交互的区域
1. 如何创建 BFC？
创建BFC的方式有很多，常见的有：
- 根元素（
<html>） - 浮动元素（float不为 none）
- overflow 不为 visible或 clip的块元素
- display:flow-root（BFC最佳实践，无副作用）
- 绝对定位元素
- 弹性或网格容器等
2. BFC 的作用
- 包含内部浮动：BFC 的高度会计算其内的浮动元素，从而解决“高度塌陷”问题。
- 排除外部浮动：BFC 的区域不会与外部浮动元素重叠，可以实现两栏自适应布局。
- 阻止外边距重叠：属于同一个 BFC 的相邻块级元素上下外边距会折叠（合并）。创建新的BFC可以阻止它们的外边距重叠。
小结： BFC是一个独立的布局环境，其内部的布局不受外界影响，同时也不会影响到外部的元素。它通过特定的CSS属性触发，主要用于解决浮动和margin相关的经典布局问题。
四、行内格式化上下文（IFC）
与 BFC 并列，IFC 规定了行内级别元素（如文字、span等）的排列规则，是处理文本、行内元素布局的基础。
1. IFC 的布局特性
- 框模型的影响：水平方向的 padding、border、margin 会生效并推开其他内容，但垂直方向的这些属性不会影响行高，可能会造成重叠或溢出。
- 垂直对齐：使用 vertical-align 属性来调整行内框在行框内的垂直位置（如顶部、中部、基线对齐）。
- 水平对齐：使用 text-align属性来控制行内内容在行框内的水平对齐方式（如左、中、右）
- 分割：当一个行内框被分割到多行时，其margin、border和padding 在断裂处不会生效
IFC 是处理文本和行内元素排版的规则集。控制着行内元素的水平排列、对齐方式以及跨行时的表现
总结
- 基础：首先，任何元素的布局计算都离不开它的包含块。这是所有计算的参考坐标系。
- 概念：在包含块划定的空间内，元素的排列遵循一套规则，这套规则就是格式化上下文。
- BFC：块级元素的布局，解决浮动和外边距等典型问题。它是一个独立的、隔离的布局环境
- IFC：行内元素的布局，处理文本对齐、垂直对齐和行框的生成。它是文本排版的核心
可以按照这个流程理解：包含块 → 布局环境（格式化上下文）→ 该环境下的具体规则（BFC或IFC）→ 解决具体的布局问题（高度塌陷、两栏布局、外边距合并、文本对齐等）。 理解了这套流程，就掌握了CSS传统流式布局的核心机制。