无法让 div 环绕我的标题。谁能明白为什么？

Question

为我的一生，我看不出为什么我的"div"不会在标题上缠绕...我已经关闭了，没有指定高度...

到目前为止，我已经搜索了其他帖子，没有解决方案。我忽略了冲突吗？

这是HTML：

<div id="navcontainer">
    <div id="siteLogo"> <a href="index.html"><img src="images/some image in a folder"/></a>        
    <div id="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
            <li><a href="calendar.html">Calendar</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    </div>
 </div>

和CSS：

#menu li a:hover { 
    color: #ff9900;
    border-bottom: 4px solid #ff9900;
}
#siteLogo img{
    height:auto;
    width: 220px;
}
#menu {
font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
font-size: 16px;
color: #c0c0c0;
    }
#outer {
    width: 960px;
    margin:0 auto;
}
#wraper {
    width: 900px;
    margin:0 auto;
}
#navcontainer {
    width: 900px;
    margin: 0 auto;
    border-bottom: thick 1px #ffppoo;
}
#siteLogo {
    float: left;
    margin-top: auto;
}
#menu {
    float: right;
    margin-top: auto;
}
#menu ul li {
    display:inline;
}
#menu ul {
    margin-top: 50px;
    text-align: center;
}
#menu ul li a {
    padding:0 0 0 20px;
}

Answer 1

略微更改您的语法并包含/清除您的float S：

#navcontainer {
  width: 900px;
  margin: 0 auto;
  border-bottom: solid 1px #000;
  overflow: hidden;
}

http://jsfiddle.net/xsfrb/

Answer 2

浮子可能正在杀死您。尝试添加最后一个

<div style="clear:both"></div> 

关闭Navcontainer

Answer 3

子元素正在漂浮在非浮动父母内，这会导致所谓的零高度容器问题 ，并具有多种解决方案。

您可以使用溢出，例如David Randall建议

您可以使用一个空的清除：div，例如Federico Jacobi建议

另一个解决方案是" clearfix"，它使用伪内容元素。看到此相关线程什么是clearfix？有关ClearFix

的更多信息

编辑：有关问题的更多背景信息http://complexspiral.com/publications/containing-floats/