我正在尝试设计一个相对定位的 div，它又包含两个 div。子 div 都没有固定高度，但它们会随着内容的变化而变化，因此父 div 会随着子 div 的高度而扩展。现在设计工作正常，但是当我用 Firebug 分析代码时，我看到将鼠标悬停在 Firebug 中的 body 标签上时，只有最顶部整个屏幕的一小部分显示为 body 。侧面板确认了，body 的宽度是可以的，但是高度是 0。这意味着父 div 的高度是 0，但是 Firebug 告诉我它不是，它是一些560 像素。这怎么可能？我知道如果内容是绝对定位的，元素不会随内容扩展，但这里子 div 是相对定位的，那么为什么父元素不随内容扩展？ fiddle 在 http://jsfiddle.net/Cupidvogel/y79NS/6/ .屏幕截图(请放大以了解我的观点!这是我在 Firefox 中将代码作为完整的 HTML 页面进行尝试时的截图):
最佳答案
在您的 CSS 中，div.clear - 您用来尝试清除 float 的对象 - 本身向左浮动。这意味着它也不是文档流的一部分，因此无法清除任何内容。
删除 float 就可以了:
.clear { width: 400px; clear: both; position: relative; }
或者，如果您希望 div.clear 因某种原因 float ，there are a wide variety of other ways to clear your floats .
编辑:div.main 的高度为 520px，因为它是 float 的， float 元素“捕捉”到其子元素的尺寸。如果您将 body 向左浮动(请不要这样做；这不是一个好主意)，它也会“吸附”到其子元素的尺寸并设置为 520 像素的高度。
关于html - 主体不会扩展以包含相对定位的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11796415/