为什么我的人力资源不能单独显示？

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。