为什么这个“<p> </p> <div> <br/> </div> <p> </p>”在DOM中显得很奇怪？

Question

当您将<p><div></br></div></p>放入正文时，您将获得奇怪的DOM结构，如：

<p></p>
<div></br></div>
<p></p>

为什么会这样？似乎当<p>包含块元素时，这将会发生。

Answer 1

根据规范p cannot have nested block elements，因此HTML解析器会在div构建DOM之前自动关闭它。

Answer 2

p无法容纳div，因为它是block级元素，p只能容纳inline元素，因此您尝试的内容不正确。

您可以改为使用span并在CSS中使用display: block;或display: inline-block;，这样可以产生同样的效果，并且完全可以接受，因为p可以拥有{ {1}}因为它是span元素。