Html 车身不'；t扩展以包括相对定位的元素

我正试图设计一个相对定位的

div

，它又将由两个

div

组成。没有一个子

div

s具有固定的高度，但它们随内容的不同而变化，因此父

div

会随着子div中的较高者而扩展。现在设计工作正常，但当我用Firebug分析代码时，我看到在Firebug中的

body

标记上方悬停时，整个屏幕顶部只有一小部分显示为主体。侧板确认了，车身宽度正常，但高度为0。这意味着父级

div

的高度是0，但Firebug告诉我不是，它大约是560px。怎么可能呢？我知道如果内容是绝对定位的，元素就不会随内容扩展，但是在这里，子

div

s是相对定位的，那么为什么父元素不随内容扩展呢？小提琴正在演奏。第个屏幕截图（请缩放以理解我的观点！这是当我在Firefox中尝试将代码作为完整的HTML页面时）：

---

在CSS中，

div.clear

（用于尝试清除浮动的）本身是向左浮动的。这意味着它也不是文档流的一部分，因此无法清除任何内容

移除

float

可以达到以下目的：

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

或者，如果出于某种原因希望浮动

div.clear

---

编辑：

div.main

的高度为520px，因为它是浮动的，浮动元素“捕捉”到其子元素的尺寸。如果将

body

向左浮动（请不要这样做；这不是一个好主意），它也将“捕捉”到其子对象的尺寸，并具有520px的设置高度。

这里发生的是正常的浏览器行为，即浮动div，因此由于float属性，“正常”流中不再有div。 所以body的高度是0，因为body不能计算“不在那个里”的元素的高度

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

---

视图：

main

div

给出了正确的高度，但是身体给出了0的高度。是的，对不起，我没有对这个问题给予足够的关注，我认为问题是你的外部

div

而不是

身体。我确实在身体元素上看到了同样的效果。怎么可能呢？“浮动元素存在于正常文档流之外”。基本上，文档流中没有任何元素，所以body元素中没有任何元素，我猜？但这并不能解释我对ajm答案的评论。你的截图上有很多个人信息。只是想让你知道……是的，对不起，
clear
部分完全是多余的，我忘了从Fiddle代码中删除它。但是这并不能解决我的问题div.clear

规则列表中的code>bit使body元素在执行此操作时具有正确的高度。但是，然后删除

clear：两者实际上再次导致问题。所以不，
clear
不是多余的。你使用的是什么版本的Firefox？您是否使用内置元素检查器（而不仅仅是Firebug）进行了检查？Firefox是否有内置检查器？Chrome开发工具：取消选中
div.clear
中的
float
属性。clear

的规则将清除您的浮动，将影响文档流的子项添加到

正文

，并放大

正文的高度。这肯定是你的问题。是的，真的有用吗？但是为什么呢？
.clear
元素应该清除上面的浮动，在这种情况下，它位于父容器本身之外，它如何使主体展开以覆盖父容器？因为它位于由于浮动而没有“尺寸”的元素内部，一旦位于浮动元素之外，您的主体标记就可以计算其高度。