为什么我的人力资源不显示在一个单独的线上？

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 />

...but 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，就不可能说出它是什么。