P标签包括h1 (如果在同一段中)

Question

我已经多次遇到这个问题，我想知道为什么浏览器会在header标记中解释p。这破坏了布局，因为元素有一个应用范围，因此它总是需要一些调整。

如果我检查元素，我可以看到以下内容：

​

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

如果使用检查器选择标头，则会得到以下信息：

​

只选择标头。我的布局中断，因为段落的空白处在页眉上方腾出了更多的空间。为什么会这样？

下面您可以看到我的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>

Answer 1

你的CSS有问题。HTML没有什么问题。您一定在某个地方将样式float应用于您的h1。

检查最后一个H1标记：http://jsfiddle.net/BQp2A/