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