css - 样式化的 div 以零高度呈现

Question

几天前我遇到了一个很烦人的问题。我在一个具有以下结构的网站上工作:

[标题]
[菜单条]
[特色内容]
[内容]
[页脚]

(这些都是水平居中的 div，它们按此顺序具有相同的固定宽度)

稍后我会更改“内容”部分的内容。在“contents”div 中还有其他 div，有时具有固定高度，有时则没有。

现在的问题是:任何时候我将另一个 div 放入“内容”而没有声明高度，内部 div 呈现为 0px。内部 div 是否具有声明高度的元素并不重要。它适用于声明的高度，但我不能保证我会始终知道内容的高度。

这可能是什么原因造成的？

Answer 1

这听起来像一个 clearfix 当 div 内的元素 float 时出现问题。

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.