div 在容器外渲染

Question

我已经在页面上启动了一个模板，出于某种原因，我的一个 DIV ( #content ) 在主“容器”div 之外呈现。我看了又看，找不到任何东西，我的代码有什么问题吗？

提前致谢。

基兹

CSS：

 #container {
width:1000px;
margin:0 auto;
background-color:#000;
}

#top {
height:100px;
margin:0px 0px 50px 0px;
background-color:#F00;
}

#navigation {
width:720px;
height:100px;
float:left;
background-color:#0F0;
}

#logo {
width:180px;
height:100px;
float:right;
background-color:#00F;
}

.clear {
clear:both;
}

#content {
margin:0 auto;
background-color:#FF0;
}

这是 HTML：

 <div id="container">
  <div id="top">
    <div id="navigation">Navigation goes here</div>
    <div id="logo">Logo</div>
    <div class="clear" />
  </div>
  <div id="content">Content goes here
  </div>
</div>

原文由 zik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

#container {
overflow: auto;
}

原文由 benhowdle89 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

好的，问题似乎是您清楚的：两者；元素是未关闭的 div。应该是br标签。所以基本上，这似乎解决了大部分问题。你不确定，为什么#top 应该设置 height: 100px;，如果里面的元素无论如何设置高度..即使它们是浮动的..然后将设置结尾。

小提琴：http: //jsfiddle.net/hobobne/qxYHN/1/

原文由 Kalle H. Väravas 发布，翻译遵循 CC BY-SA 3.0 许可协议