为什么我的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 />

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

这是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，就无法说出它是什么。