div在容器外渲染答案

【问题标题】：div rendering outside containerdiv在容器外渲染
【发布时间】：2011-07-26 13:22:59
【问题描述】：

我已经在页面上创建了一个模板，但由于某种原因，我的一个 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>

【问题讨论】：

Looks fine to me.
#content 究竟在哪里渲染？代码看起来不错。
我忘了添加 overflow:auto 正如@benhowdle89 指出的那样。它在容器外渲染...
这就是我所说的 html-magic:jsfiddle.net/hobobne/qxYHN 正如你所看到的，当你给#container 添加一个边框或一点填充时，#container 的黑色背景就会出现。我以前有这个异常，但我不记得我的修复了..至少现在..

标签： css html containers

【解决方案1】：

#container {
overflow: auto;
}

【讨论】：

很棒的工作，认为这是愚蠢的事情。 :S 谢谢！
@benhowdle89 对不起，这个答案是5年前的，为什么内容渲染在父div之外？为什么溢出：自动修复了这个问题？我花了 3 个小时试图修复它，但无法修复。

【解决方案2】：

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

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

【讨论】：

我基本上解决了您布局中的一个非常关键的问题，而我的方式不需要溢出：auto;.. 但是无论如何...
我看不出“关键”问题是什么，它验证为 XHTML 1.0 严格就好了...
好吧，最初看起来很关键的东西不是。但是，仍然使用 br 而不是 div 作为 clear: both;变量，似乎消除了#container not display-properly-issue。
我明白了。并不是#container 没有正确显示。 “#content”显示在“#container”之外。还是谢谢你。