Css 为什么将同级div元素呈现为其中一个元素的子元素

由于某些原因，div元素在渲染过程中以意外的方式更改了它们的父元素，这在Firefox和Chrome中是可以复制的

例如

Firefox调试器在运行时显示如下：

<div class="main">
    <div class="slot"><div class="slot"/></div></div>
    <div class="footer"></div>
</div>

当我删除.slot元素（请参阅所附的代码）时，所有内容都会按预期进行渲染（渲染后树中的页脚位置与源代码中的相同）

代码：

---

问题是您使用空div：就像这样

<div />

您应该尝试更改代码以使用包含空内容的有效div：

<div></div>

在Chrome中按我的预期工作：从外观上看，你没有关闭元素。是的，div没有关闭，谢谢。这是为什么？不，在XML和HTML中，不带主体的标记和带空主体的标记是不同的。这有点类似于NULL和空字符串。

<div></div>