父级span包裹子级div时的元素布局表现疑问

核心原因在于HTML的内容模型规范和浏览器的容错修正机制：

• span是行内元素（inline），根据HTML规范，它的内容模型仅允许包含行内内容（比如文本、img、其他span等），不能嵌套块级元素（如div、p）。
• 当你写出不符合规范的span包裹div代码时，浏览器会自动进行容错处理：它会把div从span中剥离出来，让两者成为同级元素。最终实际渲染的DOM结构等价于：

  <span></span>
  <div class="box">Box1</div>
  <span></span>
  <div class="box">Box2</div>
  

• 既然div还是独立的块级元素，自然会保持默认特性——占据整行、强制换行，所以两个div依然上下排列，完全不受外层span的影响。

如果想要让两个div并排显示，正确的做法是给div设置display: inline-block，或者使用Flexbox、Grid等现代布局方案，而非依赖错误的嵌套方式。

内容的提问来源于stack exchange，提问作者Peter B