爲什麼我的UL菜單與其他元素重疊？

Question

爲什麼我的UL菜單與內容div重疊？我是否缺少部分結構來分隔標題/內容？

http://jsfiddle.net/DBdHs/

CSS

.wrapper { margin: 0 auto; width: 80%; margin-top: 2em !important; } 

#top-nav { 
    list-style-type: none; 
    color: #f5f5f5; 
} 

#top-nav li { 
    float:left; 
    height: 40px; 
    line-height: 40px; 
    background: #ffffff; 
    color: #414141; 
} 

#top-nav li span { 
    padding-bottom: .4em; 
    padding-left: 3em; 
    padding-right: 3em; 
} 

#top-nav li:hover span{ 
    color: black; 
    border-bottom: 5px solid #FF9A00; 
    cursor: pointer; 
} 

#content { 
    margin: 0 auto; 
    background:#fff; 
    border: 1px solid #eaeaea; 
    min-height: 150px; 
    padding: 25px; 
} 

.row { width: 100%;}​ 

<div class="wrapper"> 
    <header> 
    <div class="row"> 
     <ul id="top-nav"> 
     <li><span>home</span></li> 
     <li><span>photos</span></li> 
     <li><span>projects</span></li> 
     <li><span>about me</span></li> 
     </ul> 
    </div> 
    </header> 

<div id="content">Welcome to my home on the internet.</div> 
</div>​ 

Answer 1

header { 
    overflow: hidden; 
} 

添加到您的CSS。

你沒有清理你的浮標。您可以在菜單後添加清除格（clear: both;），或者添加overflow: hidden;到您的標題。

這裏有一個演示 - http://jsfiddle.net/spacebeers/DBdHs/1/

Answer 2

把#content{clear:both;}到你的CSS，所以身體會永遠停留在標題下方。