html - 为什么我的 HR 没有显示在单独的行上？

Question

我有这个 HTML：

<article class="smallCaps">
    Cap Anson <span><em>my</em></span> outboard<br />
    Anyway...the reign in Spain falls mainly on the common folk<br/>
    Note: This is a big secret. Don't tell <em>them</em>
</article>
<p>&nbsp;</p>
<hr />

...但 HR 显示​​在“不要告诉他们”的右侧，而不是单独一行。

这是CSS：

<style type="text/css">
    .smallCaps {
        font-variant: small-caps;
        font-family: "Segoe UI", sans-serif;
    }
    .comicSansLarge {
        font-size: 32px;
        font-family: "Comic Sans", Consolas, serif;
        color: hsl(30, 100%, 50%);
    }
</style>

Answer 1

将此添加到您的CSS：

hr {
  clear:both;
  display: block;
}

Answer 2

一个可能的原因是文章是浮动的。像这样：

http://codepen.io/seraphzz/pen/jyngu

你的 CSS 中的某些东西导致了它，但是如果没有看到你的 CSS，就不可能说出它是什么。