绝对定位儿童的有效清除修复答案

【问题标题】：A working clearfix for absolutely positioned children绝对定位儿童的有效清除修复
【发布时间】：2016-11-10 06:01:06
【问题描述】：

考虑以下代码：

<html>
<head></head>
<body>
    <div id="A">
        <div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div>
    </div>
</body>
</html>

A 的高度为 0，与 B 的大小及其内容无关。我希望 A 根据 B 内部的内容适当设置其高度。

这可以通过 CSS 实现吗？

到目前为止，我还没有找到任何方法来做到这一点，但我很确定 CSS 应该能够处理这个问题，这看起来非常简单。

我知道有很多关于实现 clearfix 的帖子，但它们似乎已经过时了。现在是 2016 年，也许有新的替代品可用。

重要的东西：这就是我想要实现的，我没有写那么小的布局和那些样式属性偶然。请不要建议布局与我提出的布局不同的替代方案。

【问题讨论】：

Position:absolute 将元素从流程中移除，因此任何其他元素都看不到它，并且没有什么比清除绝对或固定元素更重要的了。 Clearfix 方法是关于浮动元素的，Javascript 可以帮助你，但我不知道任何那种现成的脚本......
你只希望它在 css 中？可以用js吗？
@Thinker 我希望它在 CSS 中。
@GCyrillus 哦，好的，有什么办法可以强制它回到流程中吗？我不能浮动这些元素，因为它们中的许多元素可能一个接一个，它们会并排堆叠，这不是我打算做的。我真的不想用 JS 来解决这个问题。
“不清楚你在问什么”...每天都更糟。

标签： html css clearfix

【解决方案1】：

由于您希望 A 的高度与 B 中的内容匹配，您可以通过将 display: list-item; 添加到 A 来实现。display: list-item; 为内容生成块框。

#A {
  background-color: yellow;
  position: relative;
  display: list-item;
}

<div id="A">
  <div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div>
</div>

【讨论】：

谢谢 rps，非常有趣的替代方案，但是它没有考虑 img 等元素。