身体不会扩展到包括相对定位的元素

Question

我正在尝试设计一个相对定位的div，而div又包含两个div。没有一个孩子div具有固定的高度，但它们随内容而变化，因此父body扩展为子div的较高者。现在设计工作正常，但是当我用Firebug分析代码时，我看到它悬停在Firebug中的div标签上，只有顶部整个屏幕的一小部分显示为正文。侧面板确认它，身体的宽度是好的，但高度是0.这意味着父div的高度为0，但Firebug告诉我它不是，它是560px。这怎么可能？我知道如果内容是绝对定位的，元素不会随其内容扩展，但是这里的子{{1}}是相对定位的，那么父母为什么不扩展其内容？小提琴在http://jsfiddle.net/Cupidvogel/y79NS/6/。截图（请放大以了解我的观点！当我在Firefox中尝试将代码作为完整的HTML页面时）：

Answer 1

在你的CSS中，div.clear - 你用来试图清除你的花车 - 它本身就是浮动的。这意味着它也不是文档流程的一部分，因此无法清除任何内容。

删除float可以解决问题：

.clear { width: 400px; clear: both; position: relative; }

或者，如果您希望div.clear由于某种原因而浮动，there are a wide variety of other ways to clear your floats。

编辑：div.main的高度为520px，因为它浮动并且浮动元素“捕捉”到他们孩子的尺寸。如果你向左浮动body（请不要;这不是一个好主意），它也会“捕捉”到它的孩子的尺寸，并且设置高度为520px。

Answer 2

这里发生的是正常的浏览器行为，你浮动div，所以由于float属性，不再存在于'normal'流中。 所以身体是高度0，因为身体无法计算“不在那里”的元素的高度。

将div class =“clear”移出div class =“main”并移除float属性以及div class =“clear”，问题解决了。

查看：http://jsfiddle.net/y79NS/8/