块级元素能否嵌套其他块级元素？及嵌套异常原因咨询

嘿，刚入门HTML就问到了很关键的点！这两个问题其实涉及HTML元素的内容模型规则——简单说就是每个元素都有自己“能装什么”的规矩，我来给你拆解清楚：

1. 块级元素是否可以包含另一个块级元素？ #

大部分情况下是完全可以的！比如我们最常用的<div>、<section>、<article>这些通用块级容器，天生就是用来包裹其他元素（包括块级）的，比如你可以这么写：

<section class="article-container">
  <h2>这是一篇文章的标题（块级）</h2>
  <p>这是文章第一段（块级）</p>
  <div class="image-box">
    <img src="example.jpg" alt="示例图片">
    <p>图片下方的说明文字（块级）</p>
  </div>
</section>

但要注意例外情况：有些块级元素属于“短语内容容器”，它们的规则是不能包含其他块级元素。最典型的就是<p>标签，它的设计目的是包裹一段连续的文本内容，如果你硬往里面塞<div>、<h1>这类块级元素，浏览器会自动帮你“拆包”，导致结构混乱。比如：

<!-- 错误写法，浏览器会自动修正 -->
<p>
  这段文字后面我想放一个div：
  <div>我是一个块级div</div>
</p>
<!-- 浏览器实际渲染后的结构 -->
<p>这段文字后面我想放一个div：</p>
<div>我是一个块级div</div>
<p></p>

除了<p>，像<cite>这类具有特定语义的元素也有类似限制。

2. 为何无法实现两个块级元素的互相嵌套？ #

你遇到的“无法嵌套”，通常是这几种情况导致的：

• 元素自身的规则限制：比如刚才说的<p>不能包块级元素，那如果你想实现<p>包<div>同时<div>包<p>，前者本身就不合法，自然无法完成互相嵌套。
• 语义化的不合理性：有些块级元素的语义决定了它们不适合互相嵌套。比如<h1>到<h6>是标题层级，你不会把<h2>放到<h1>里面（语义上标题是同级或子级关系，不是包含关系），虽然浏览器不会报错，但这种嵌套完全不符合HTML的语义规范，也没有实际用途。
• 浏览器的自动修正机制：当你写了不符合规则的嵌套时，浏览器为了保证文档结构合法，会自动调整DOM结构，比如把不合法的嵌套拆开，导致你原本想实现的互相嵌套效果“消失”。
• 特殊块级元素的限制：比如<address>、<blockquote>这类具有特定语义的块级元素，它们的内容应该是文本或短语内容，嵌套其他块级元素要么不被允许，要么语义上非常奇怪。

简单总结：块级元素能不能嵌套，核心看这个元素的内容模型——允许包含流内容的块级元素可以嵌套其他块级，只允许短语内容的则不行。如果遇到无法互相嵌套的情况，先查一下这两个元素的官方内容规则，大概率是违反了某个嵌套限制~

内容的提问来源于stack exchange，提问作者Mille Gloerfelt Tarp