Css p标签包括h1，如果在同一部分内

我已经多次遇到这个问题，我想知道为什么浏览器会解释

p

标记中的

标题。这会打断布局，因为元素应用了边距，因此始终需要进行一些调整

如果我检查元件，我可以看到以下情况：

p
标记包含标题，就像它在
p
标记中一样

如果使用inspector选择标题，则会得到以下结果：

标题仅被选中。我的布局中断，因为段落的边距在页眉上方留出了更多空间。为什么会发生这种情况

下面您可以看到我的html，它非常简单明了：

<section class="content">
    <h1>Meet Sophie, our unique vision for design speakers</h1>
    <p>Are you looking for high-performance design speakers that can provide a truly mesmerizing sound experience? If so, B.A.S. has the answer. We believe that speakers should create a comprehensive atmosphere. That’s why we design speakers that have the power to capture the imagination – both aurally and visually.
    </p>
    <p>Sophie is our first innovation, a set of thin-bodied design speakers with voluptuous curves and a remarkably strong voice. Explore our versatile sets and meet the beauty of sound in person.
    </p>
    <h1>The DD set: design speakers for studios and events</h1>
    <p>Ever the optimal choice for studios, events and large spaces, our Sophie DD set consists of two perfectly balanced, artistic design speakers paired with two powerful subwoofers. Whether you’re mixing, recording, performing or simply listening, these design speakers will always leave a lasting impression with any audience that hears and sees them.
    <br>
    [Explore the possibilities of our professional design speakers]
    </p>
    <h1>The DS-set: design speakers for powerful, centralized sound</h1>
    <p>Dedicated spaces deserve dedicated sound. With the DS set of Sophie design speakers, you’ll be able to create a comprehensive experience in a wide range of specific scenarios – from listening rooms and media rooms to professional presentations, the twin Sophie design speakers and their single subwoofer companion will easily create the perfect soundscape.
    <br>
    [Create beautiful soundscapes with our versatile design speakers]
    </p>
</section>


认识Sophie，我们对设计演讲者的独特愿景
您是否正在寻找能够提供真正迷人声音体验的高性能设计扬声器？如果是，B.A.S.有答案。我们认为，发言者应创造一种全面的气氛。这就是为什么我们设计的扬声器能够在听觉和视觉上捕捉想象力。

Sophie是我们的第一个创新产品，是一套薄体设计的扬声器，具有性感的曲线和非常强劲的声音。探索我们的多功能套装，亲自体验声音之美。

DD系列：为工作室和活动设计扬声器
Sophie DD系列是工作室、活动和大型空间的最佳选择，由两个完美平衡的艺术设计扬声器和两个强大的低音炮组成。无论你是混音、录音、表演还是只是聆听，这些设计演讲者都会给任何听到和看到他们的观众留下持久的印象。


[探索我们专业设计演讲者的可能性]

DS套件：设计扬声器，提供强大、集中的声音
专用空间值得专用声音。借助DS系列Sophie design扬声器，您将能够在各种特定场景中创造全面的体验–从听音室和媒体室到专业演讲，两个Sophie design扬声器和一个低音炮伴奏将轻松创造完美的音景。


[使用我们的多功能设计扬声器创造美丽的音景]

您的CSS有问题。HTML没有什么问题。您必须已将样式
float
应用于您的
h1
某个位置

检查最后一个H1标记：
如果我将您的HTML放入js FIDLE中，那么我无法让它认为标题在段落中。如果您可以在上面创建一些显示您的问题的东西，那么这将有助于调试它。首先，我注意到您提供的HTML内容与屏幕截图中的内容不同（上面的文本不同）。你有脚本或类似的东西来显示、隐藏或改变你的内容吗？@cimmanon：这不是问题所在。如果查看突出显示的部分，它会突出显示页面中包含
标记和
标记的区域，并说明它是
p
标记。问题是为什么
h1
被包含在
p
中，而它似乎不存在。如果p的顶部边缘非常大，并且某种定位意味着页眉可以放在p的顶部边缘上，那么这可能与边缘有关。。。但这不仅仅是关于折页边距的问题。那么展示你的CSS呢……我仍然需要从浮动元素中学习。。。这是因为h1从流中取出？就像绝对位置一样。是这样吗？是的。浮动图元的作用就好像它在指定位置没有占据任何高度一样。要解决此问题，请删除浮动样式，或在右侧下方的
p
中添加一个
clear:both
。