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 回答