为什么我的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

将#content{clear:both;}放入您的CSS中，因此正文将始终位于标题下方。