块级元素竖向堆叠且宽度默认会撑满其父容器的可用宽度

<div> 作为典型的块级元素（Block-level Element） ，在默认的 CSS 布局（标准流/正常流）中，确实是竖向堆叠的。我会用通俗的方式帮你理解这个核心概念。

1. 核心原理：块级元素的默认布局规则

在浏览器的默认样式中，块级元素有两个关键特性决定了它的竖向堆叠：

独占一行 ：块级元素的宽度默认会撑满其父容器的可用宽度（即使你只写了几个字），所以它会把整行占满，后面的元素只能"换行"显示。
垂直排列：多个块级元素会按照它们在 HTML 中的书写顺序，从上到下依次排列（竖向堆叠），每个元素占据独立的一行。

2. 代码示例：直观看 div 的竖向堆叠

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 给 div 加样式，方便看效果，无样式时也是竖向堆叠 */
    .box {
      /* 故意设置宽度小于父容器，验证即使宽度小，仍独占一行 */
      width: 200px;
      height: 80px;
      border: 2px solid #333;
      margin: 5px 0; /* 加一点外边距，区分每个 div */
    }
    .box1 { background: #f0e68c; }
    .box2 { background: #98fb98; }
    .box3 { background: #87ceeb; }
  </style>
</head>
<body>
  <div class="box box1">第一个 div</div>
  <div class="box box2">第二个 div</div>
  <div class="box box3">第三个 div</div>
</body>
</html>

效果说明：运行这段代码后，你会看到 3 个 div 并不会并排显示，而是从上到下竖向堆叠（第一个在最上，第二个在中间，第三个在最下），哪怕每个 div 的宽度只有 200px（远小于浏览器宽度），也依然独占一行。

3. 对比：行内元素 vs 块级元素

为了更清晰，我们对比行内元素（比如 <span>）的表现：

html 复制代码

<span>行内元素1</span>
<span>行内元素2</span>
<div>块级元素div</div>
<span>行内元素3</span>

效果：

行内元素1、2 会横向并排显示；
遇到 div 后，div 独占一行（竖向），行内元素3 会在 div 下方继续横向显示。

4. 如何让 div 不竖向堆叠？

如果你想让 div 横向排列（比如做导航栏、卡片布局），可以通过 CSS 修改布局规则，常见方式：

使用 display: flex（最推荐，现代布局方式）；
使用 float: left/right（旧方式，不推荐）；
使用 display: inline-block（介于块级和行内之间）。

示例（flex 实现横向排列）：

html 复制代码

<div style="display: flex; gap: 10px;">
  <div class="box box1">横向1</div>
  <div class="box box2">横向2</div>
  <div class="box box3">横向3</div>
</div>