html - 绝对定位元素仍然需要为后面的内容设置高度

Question

我遇到了一个布局挑战，其中顶部标题内容需要有一个动态打开并 float 在所有其他内容之上的菜单。这使我认为它必须是绝对定位的。这很难解释，所以我创建了一个如下所示的 fiddle :

http://jsfiddle.net/4WzA8/

默认情况下，CONTENT 3 部分是隐藏的，在此示例中，通过单击 CONTENT 2 列表来切换可见性。我需要它来覆盖其余内容，包括 4。问题是主要内容包装器不读取此绝对定位元素的高度。我尝试按照描述应用 clearfix here .

header:after {
    content:"";
    display:table;
    clear:both;
}

Answer 1

通过使用 position: absolute; 元素从文档正常流中移除，文档流位于绝对定位元素之后。

这不是清理修复问题。它不会以这种方式解决。

您需要在 wrapper 中添加一个属性值 margin-top 以将其下推。但在这种情况下，标题应该有明确的高度。

或者只是不要绝对定位标题。并使用 overflow: hidden; 清除修复。

此方法也适用于清除 float :

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

.clearfix {
  *zoom: 1; /*  Trigger hasLayout in IE 6/7 */
}