div中的内容溢出到div下面

Question

有人能告诉我为什么page-view-count & num-of-days div的内容泄漏到top-header在我的实现中吗？

标记：

<div id="top-stats"> 
    <div id="page-view-count">count</div> 
    <div id="num-of-days">num of days</div> 
</div> 

<div id="top-header"This is a test</div> 

CSS

#top-stats{ 
    width: 100%; 
} 

#page-view-count, #num-of-days{ 
    color: #666; 
    text-shadow:1px 1px #FFFFFF; 
    font-size:13px; 
    font-weight: bold; 
    padding-bottom: 5px; 
} 

#page-view-count{ 
    float:left; 
} 

#num-of-days{ 
    float:right; 
} 

#top-header{ 
    width:100%; 
    display:block; 
    background-color:#DBDB70; 
    border-radius:3px; 
} 

如果我要删除float财产好听栈内top-stats。

见fiddle

我可能错过了一些简单的规则，但我可能太密切关注和需要另一双眼睛..

Answer 1

#top-header{ 
    clear: both; 
    width: 100%; 
    display:block; 
    background-color:#DBDB70; 
    border-radius:3px; 
} 

Fiddle