CSS 文檔流：元素排列的底層邏輯與布局控制

一、文檔流的核心概念

文檔流（Normal Flow）作為瀏覽器默認的布局模式，從根本上決定了元素在頁面上的自然排列順序。**它的核心規則遵循從上到下依次堆疊的原則，其中塊級元素會獨占一行，行內元素則水平排列。**這種布局模式與書本的文字排版極為相似，具有以下鮮明特征：

1.塊級元素（如 <div>、<p>）

• 獨占空間特性：在垂直方向上，塊級元素會獨占一行，其寬度在默認情況下會撐滿父容器。這就使得它們在頁面布局中能夠清晰地劃分出不同的區域，為頁面構建起基本的結構框架。
• 樣式設置能力：塊級元素支持全面的樣式設置，包括寬度、高度以及內外邊距等。這賦予了開發者極大的靈活性，可以根據設計需求精確地控制元素的大小和位置。
• 典型應用場景：常用于構建頁面的主要結構容器，如頭部、側邊欄、內容區域等；同時，也是段落文本的主要承載元素，為文本內容提供清晰的展示區域。

2.行內元素（如 <span>、<a>）

• 排列方式：行內元素在水平方向上并排排列，其寬度完全由內容決定。這使得它們能夠自然地融入文本流中，不會破壞文本的連續性。
• 樣式限制：由于其特性，行內元素無法直接設置寬度和高度，并且垂直方向的邊距設置通常不會生效。這是需要開發者在使用時特別注意的地方。
• 典型應用場景：主要用于對文本進行修飾，如設置字體顏色、加粗、傾斜等；同時，也是創建超鏈接的常用元素，為用戶提供導航功能。

3.行內塊元素（如 <img>、<button>）

• 綜合特性：行內塊元素兼具行內元素的排列特性和塊級元素的樣式設置能力。它們既可以像行內元素一樣在水平方向上并排排列，又可以像塊級元素一樣設置寬度、高度和內外邊距。
• 典型應用場景：常見于圖片展示和表單控件，如按鈕、輸入框等。這種特性使得它們在頁面中能夠靈活地布局，同時滿足視覺和交互的需求。

特殊現象

• 空白折疊現象：在文檔流中，多個連續的空格、制表符或換行符會被合并為一個空格。這在處理文本內