CSS 正常流

正常流（Normal Flow）是HTML元素在默认情况下的布局方式，也称为文档流。在正常流中，元素按照它们在HTML文档中出现的顺序依次排列。

基本概念

正常流是CSS布局的基础，所有元素默认都处于正常流中。了解正常流对于学习其他布局技术（如浮动、定位、Flexbox和Grid）至关重要。

块级元素与行内元素

在正常流中，元素主要分为两类：

1. 块级元素（Block-level Elements）

块级元素的特点：

独占一行空间
默认宽度为父容器的100%
可以设置宽高、内外边距
常见的块级元素：div、p、h1-h6、ul、ol、li、table、form等

html

<div>这是一个块级元素</div>
<p>这也是一个块级元素</p>

在正常流中，块级元素会垂直堆叠，每个元素占据一行。

2. 行内元素（Inline Elements）

行内元素的特点：

与其他行内元素在同一行显示
宽度和高度由内容决定
不能设置宽高、上下内外边距
常见的行内元素：span、a、strong、em、img、input、button等

html

<p>这是一段文本，包含<span>行内元素</span>和<a href="#">链接</a></p>

在正常流中，行内元素会水平排列，直到一行放不下，然后自动换行。

3. 行内块元素（Inline-block Elements）

行内块元素结合了块级元素和行内元素的特点：

与其他行内元素在同一行显示
可以设置宽高、内外边距
宽度和高度默认为内容的宽度和高度
通过display: inline-block设置

html

<span style="display: inline-block; width: 100px; height: 50px; background-color: #f00;">
  行内块元素
</span>

正常流中的元素排列

1. 水平方向排列

块级元素：每个块级元素独占一行，宽度默认充满父容器
行内元素和行内块元素：从左到右排列，当一行空间不足时自动换行

2. 垂直方向排列

块级元素：垂直堆叠，按照HTML文档中的顺序从上到下排列
行内元素和行内块元素：在同一行内垂直对齐，默认以基线（baseline）对齐

正常流中的空间分配

1. 外边距折叠（Margin Collapsing）

在正常流中，相邻块级元素的上下外边距会发生折叠，最终的外边距值为两者中的较大值。

css

p {
  margin: 20px 0;
}

两个相邻的<p>元素之间的外边距不是40px，而是20px（较大的那个外边距）。

2. 内容空间

块级元素：内容区域的高度由其内容决定，可以通过height属性设置
行内元素：内容区域的高度由字体大小和行高决定，不能通过height属性设置

脱离正常流的情况

以下情况会使元素脱离正常流：

设置float: left或float: right
设置position: absolute或position: fixed
设置position: sticky（在特定条件下）
设置display: none（元素完全隐藏，不占据空间）

应用场景

1. 简单文档布局

对于简单的文档型布局，正常流通常就足够了：

html

<header>
  <h1>网页标题</h1>
</header>
<main>
  <section>
    <h2>章节标题</h2>
    <p>段落内容...</p>
  </section>
  <section>
    <h2>另一章节标题</h2>
    <p>段落内容...</p>
  </section>
</main>
<footer>
  <p>页脚信息</p>
</footer>

2. 内容展示

对于主要以文本和图片为主的内容展示，正常流提供了良好的阅读体验：

html

<article>
  <h1>文章标题</h1>
  <p>文章简介...</p>
  <img src="image.jpg" alt="文章图片">
  <p>文章内容...</p>
</article>

注意事项

默认行为：所有元素默认都处于正常流中，除非被其他CSS属性修改。
外边距折叠：注意相邻块级元素的上下外边距会发生折叠，这可能会影响布局的预期效果。
基线对齐：行内元素默认以基线对齐，可能会导致不同大小的行内元素在垂直方向上不对齐，可以通过vertical-align属性调整。
宽度计算：块级元素的默认宽度是父容器的100%，但当设置了padding、border和margin时，需要注意盒模型的计算方式。

总结

正常流是CSS布局的基础，了解正常流的工作原理对于学习和掌握其他布局技术至关重要。在实际开发中，正常流适用于简单的文档布局和内容展示，而对于复杂的布局需求，则需要结合其他布局技术（如Flexbox、Grid、浮动和定位）来实现。