如何防止父级div随其子元素一起增长？

Question

我有一个

里面有一个

，我希望包含的
在高度方面不受子元素
的影响。

Jsfiddle链接：http://jsfiddle.net/9eCq6/3/ 参考这个jsfiddle，我想让黄色的
不比蓝色的高，对于彩色下面的文本块，也不受红色
的影响 - 也就是说，我希望它重叠在下面的文本块上面。

我怀疑答案在于定位，并受到应用的浮动的影响，但我还没有找到解决方案。我应该做什么或阅读哪些内容来找到解决方案？

编辑：我不想给父元素设置固定高度，因为我不知道会添加什么内容。

- Travis Northcutt

Answer 1

使用绝对定位脱离父级元素。同时需要使用 overflow: visible 和清除浮动：

.wrap {
    position: relative;
    overflow: visible;
}

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

.right {
    position: absolute;
    top: 0;
    right: 0;
}

.right ul {
    position: absolute;
    top: 100%;
    left: 0;
}

- Pavlo

---

这样确实避免了将 div 推到下方，但黄色背景的 div 仍会随 ul 的增长而变大。你知道如何防止这种情况吗？ - Travis Northcutt

那看起来很完美。谢谢！ - Travis Northcutt

Answer 2

这篇老的BrainJar文章是关于CSS定位的一个很好的、全面的参考资料。它已经过时，但仍然表现出色。如果你先花时间去了解你所处理的基本系统，那么你将会遇到这些问题更少。

话虽如此，你问题的（部分）解决方案很简单。将div.under放在div.wrap里面，并在CSS .under选择器中添加clear: left;。参见这个fiddle。

- Ryan Artecona

Answer 3

给父元素设置固定大小，并使用overflow:hidden。

- Diodeus - James MacFarlane

---

抱歉，我应该明确表示我想避免为父级元素设置固定高度，因为我不知道可能会添加什么内容。 - Travis Northcutt

这些是相互矛盾的要求。 - Diodeus - James MacFarlane