CSS Flow
CSS 标准流（Normal Flow）是指浏览器默认的布局方式，元素按照其在 HTML 中出现的顺序依次排列。标准流是 CSS 布局的基础，理解它有助于更好地掌握其他布局方式（如浮动、定位、Flexbox 和 Grid）。
标准流的特点
块级元素（Block-level Elements）：
- 块级元素默认会占据父容器的整个宽度。
- 每个块级元素会从新的一行开始，垂直排列。
- 常见的块级元素：
<div>、<p>、<h1>到<h6>、<ul>、<li>等。 - 示例：
html <div>块级元素 1</div> <div>块级元素 2</div>这两个<div>会从上到下排列。
行内元素（Inline Elements）：
- 行内元素只占据其内容所需的宽度，不会独占一行。
- 多个行内元素会水平排列，直到一行放不下时才会换行。
- 常见的行内元素：
<span>、<a>、<strong>、<em>等。 - 示例：
html <span>行内元素 1</span> <span>行内元素 2</span>这两个<span>会从左到右排列。
行内块级元素（Inline-block Elements）：
- 行内块级元素结合了块级和行内元素的特性。
- 它们可以设置宽度和高度，同时不会独占一行。
- 示例：
html <span style="display: inline-block; width: 100px;">行内块级元素 1</span> <span style="display: inline-block; width: 100px;">行内块级元素 2</span>这两个<span>会水平排列，并且可以设置宽度。
外边距折叠（Margin Collapsing）：
- 在标准流中，垂直方向上的相邻块级元素的外边距会发生折叠（取较大的外边距值）。
- 示例：
html <div style="margin-bottom: 20px;">块级元素 1</div> <div style="margin-top: 30px;">块级元素 2</div>这两个<div>之间的实际间距是30px，而不是20px + 30px。
脱离标准流
通过以下方式可以让元素脱离标准流：
浮动（Float）：
- 使用
float: left;或float: right;可以让元素脱离标准流，并向左或向右浮动。 - 示例：
css .float-left { float: left; width: 50%; }
- 使用
定位（Positioning）：
- 使用
position: absolute;或position: fixed;可以让元素脱离标准流。 - 示例：
css .absolute { position: absolute; top: 10px; left: 10px; }
- 使用
Flexbox 和 Grid：
- 使用
display: flex;或display: grid;可以让容器内的子元素脱离标准流，按照 Flexbox 或 Grid 的规则排列。
- 使用
总结
标准流是 CSS 布局的默认行为，理解块级元素、行内元素以及外边距折叠等特性是掌握 CSS 布局的基础。通过浮动、定位、Flexbox 和 Grid 等技术，可以更灵活地控制页面布局。