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; 
} 

나는 그것이 top-stats 안에 멋지게 스택 float 속성을 제거한다면.

는 fiddle

아마 몇 가지 간단한 규칙을보고 싶어하지만 난 아마 너무 밀접하게보고 눈을 또 한 쌍을 필요 해요을 .. 참조

Answer 1

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

Fiddle