css - div 中的内容溢出到下面的 div 中

Question

有人能告诉我为什么page-view-count& num-of-daysdiv 的内容会溢出到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。

见小提琴

我可能错过了一些简单的规则，但我可能看得太仔细了，需要另一双眼睛..

Answer 1

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

小提琴