我有一个简单的<p>元素，里面有文本，文本过半时，我想插入一个图像.由于某种原因，图像后面的文本没有根据样式表设置样式:
p {
font-size: 20px;
}<p>
Text is styled according to the stylesheet.
<div></div>
Text loses its styling.
</p>为什么会这样呢？
我有一个简单的<p>元素，里面有文本，文本过半时，我想插入一个图像.由于某种原因，图像后面的文本没有根据样式表设置样式:
p {
font-size: 20px;
}<p>
Text is styled according to the stylesheet.
<div></div>
Text loses its styling.
</p>为什么会这样呢？
您的标记无效！使用Markup Valdiator判断您的项目编码是否有效.
问题是，段落(<p>)只是一个文本块的容器，在该文本块中需要流动文本.然而，与span不同的是，div是块容器，因此不是流文本的容器.
现代主流浏览器有一个自动更正功能，可以修复代码中的大多数错误，以便仍然呈现文档，而不是完全 destruct 文档本身.
浏览器将更正您的代码，如下所示:
<p>
Text is styled according to the stylesheet.
</p>
<div></div>
Text loses its styling.
这样，您就会意识到为什么第二行不再受CSS样式的影响.
您在 comments 中表示:
@ralph.m是的，因为我想在它下面添加一个图像的描述.
这一点我不得不说，div也不是一个合适的容器.正确的方法是使用figure和figcaption.
<figure>
<img src="https://via.placeholder.com/200.jpg">
<figcaption>This is just a Placeholder Image</figcaption>
</figure>然而，如上所述，在段落中包含流动文本以外的内容是不正确的.因此，您必须按如下方式拆分标记:
<p>Text is styled according to the stylesheet.</p>
<figure>
<img src="https://via.placeholder.com/200.jpg">
<figcaption>This is just a Placeholder Image</figcaption>
</figure>
<p>More flow-text.</p>