3

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

在此处输入图像描述

4

2 回答 2

4

在您的 CSS 中，div.clear您用来尝试清除浮动的 CSS 本身是向左浮动的。这意味着它也不是文档流的一部分，因此无法清除任何内容。

删除float可以解决问题：

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

或者，如果您想div.clear因某种原因被浮动，还有很多其他方法可以清除您的浮动。

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

于 2012-08-03T13:21:50.087 回答
1

这里发生的是正常的浏览器行为，您浮动 div，因此由于 float 属性，“正常”流程中不再存在。所以 body 的高度为 0，因为 body 无法计算“不在其中”的元素的高度。

将 div class="clear" 移出 div class="main" 并删除 div class="clear" 上的 float 属性，问题解决。

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

于 2012-08-03T14:00:27.710 回答