1. 1. CSS文档流概念总览
1.1 文档流的定义与格式化上下文
在 CSS 中，文档流指的是浏览器在没有被浮动、定位等特殊处理干预时，元素按照默认的排布规则自上而下、逐个放置的方式。这里的核心概念是格式化上下文，它决定了元素盒子如何在页面上分配空间并相互影响。理解文档流有助于掌握后续对普通流、块级元素与行内元素的布局原理的解读。
当元素处于文档流中时，浏览器会按照它们的显示类型（display 值）把盒子放到页面上。此时，元素按照顺序从上到下、从左到右，在父级盒子内形成一个连续的纵向排列。这个过程就构成了对文档流的第一层理解。
要点快速回顾：文档流是默认的布局规则，在此规则下，块级元素按垂直方向堆叠，行内元素在同一行内排列，它们共同决定了整页的纵向结构与文本走向。
/* 简单示例：三种 display 值在文档流中的表现 */
.blockish { display: block; width: 80%; border: 1px solid #f00; margin: 8px 0; }
.inlineish { display: inline; padding: 2px 6px; border: 1px solid #0a0; }
.inlineblockish { display: inline-block; width: 120px; height: 40px; border: 1px solid #00f; }
通过上面的示例可以清晰看到，块级盒子通常独占一行并撑满可用宽度，而行内盒子则在同一行内与文本和其他行内盒子并排出现，直到换行为止。
1.2 普通流、浮动和定位的关系
在不使用 float、position、flex 或 grid 等定位机制时，元素遵循普通流的规则进行排布；而当引入浮动（float）时，盒子会脱离普通流，在文档中形成新的排列；定位（如 position: absolute/relative）则允许元素在文档流之外或相对其包含块进行放置。这三者共同决定了布局的灵活性与可控性。
理解这一关系有助于后续理解<展示>相关的布局技巧。此处的核心在于：普通流是基础布局模式，浮动与定位则是在不改变文档流的前提下实现特定效果的手段。
若要对比一个场景：不做特殊定位时，三个块级元素会在页面上自上而下垂直堆叠，中间若没有额外的外边距会自然贴合；如果给某个元素设置 float，它就会在同级中浮动，其他元素的文档流会重新排布以适应新的浮动盒子。
2. 2. 普通流的定义与作用
2.1 块级元素在普通流中的行为
在普通流中，块级元素具有自成一行的特性，它们默认占据父容器的全部可用宽度，直到遇到下一个块级盒子才会继续向下排布。这种行为使得页面的纵向结构变得清晰且可预测。垂直堆叠是块级元素最显著的表现形式。
块级盒子之间的外边距会产生折叠现象，尤其是段落之间的边距折叠，常导致看起来比实际设定更紧凑的垂直间距。这一特性在不同浏览器中表现一致，是布局设计中的关键点之一。
此外，块级元素默认的盒模型宽度为包含块宽度，如果给它设定width，就会改变它在普通流中的可用宽度。理解这一点能帮助你掌控网格和盒子之间的关系。
/* 块级元素在普通流中的典型样式 */
.section { display: block; width: 90%; margin: 12px auto; padding: 10px; border: 1px solid #bbb; }
2.2 行内元素与文本流的协作
行内元素在普通流中与文本一起参与同一行的布局；它们不会独占整行，直到遇到换行或遇到一个不能再容纳的空间。此特性使得文本段落、链接、图片内联等内容可以紧密地排布在同一行内，形成自然的文本流。
行内元素的高度通常由字体大小决定，line-height、vertical-align 等属性影响其垂直对齐方式，进而影响整段文本的视觉对齐效果。正确把握这些属性，有助于实现美观的文本排版与按钮组的紧凑布局。
/* 行内与内联块元素的对比示例 */
a.inline { display: inline; padding: 2px 6px; }
span.text { display: inline; line-height: 1.6; }div.wrap { display: inline-block; width: 180px; vertical-align: baseline; }
3. 3. 行内元素在文档流中的布局原理
3.1 行内格式化上下文与基础对齐
行内元素共同组成行内格式化上下文，该上下文决定了文本、图片和其他行内盒子如何在同一行中排布。对齐方式通常以基线为参照，baseline对齐是默认的行为，这也是文本行看起来整齐的原因之一。
当需要调整单个元素相对于文本基线的位置时，可以使用vertical-align属性，它允许你将元素抬高、降低、或与文本顶部对齐等多种方式，从而实现更精细的视觉效果。
文本密度与换行规则由white-space、word-break、以及视口宽度共同影响。通过合理的属性组合，可以实现无缝的文本排布与按钮组的紧凑排布。
/* 行内元素的对齐控制示例 */
.icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.label { display: inline; vertical-align: baseline; }
3.2 换行、空白与文本流的控制
文本流中的空白字符与换行在文档流中通常会被浏览器合并成单一空格，但在某些场景下你需要控制换行与空白的处理方式。通过设置white-space、word-wrap、word-break等属性，可以实现强制换行、忽略空白或在长单词处断行等效果。
可交互的控件，如按钮、输入框等，往往需要与文本行内元素共同工作。此时，使用display: inline-block或display: block在合适的场景下能实现更稳定的对齐与间距控制，确保在不同设备上的一致性。
/* 控制换行与空白的常用技巧 */
.no-wrap { white-space: nowrap; }
.wrap { white-space: normal; word-break: break-word; }
.btn { display: inline-block; padding: 6px 12px; vertical-align: middle; }
