为何<p>元素会溢出<span>元素？块级与行内元素布局疑问

• HTML嵌套规则是核心根源：行内元素（比如<span>）在HTML规范里明确禁止包含块级元素（比如<p>），这种写法本身就不符合标准。
• 浏览器的自动纠错机制：当浏览器识别到这种非法嵌套时，会自动调整DOM结构——直接把<p>从<span>里剥离出来，让二者变成同级节点。比如你写的<span><p>内容</p></span>，最终会被浏览器解析成类似下面的结构：

  <span></span>
  <p>内容</p>
  

• 块级元素的布局逻辑：块级元素的默认行为是占满父容器的全部可用宽度，此时<p>的父容器是<body>（或更上层的块级容器），自然会撑满屏幕宽度。而<span>作为行内元素，宽度仅由自身内容决定，视觉上就会出现<p>“溢出”<span>的效果——但实际上二者已经不是父子关系了，<p>根本不在<span>内部。

你可以打开浏览器开发者工具的Elements面板，直接查看修正后的DOM结构，就能直观看到这个变化。

内容的提问来源于stack exchange，提问作者Liam Anderson