如何防止父div与其子女一起成长？

Question

我在ul内有一个div，并希望包含div的内容ul不会受到孩子div的影响。

Jsfiddle：http://jsfiddle.net/9eCq6/3/

参考jsfiddle，我希望黄色divs不高于蓝色divs，并且对于彩色ul下面的文本块不是被红色{{1}}推倒 - 也就是说，我希望它与下面的文本块重叠。

我怀疑答案在于定位，并且受到浮动应用的影响，但我还没有找到解决方案。我该怎么办或阅读才能找到解决方案？

编辑：我想不给父母一个固定的高度，因为我不知道可能会添加哪些内容。

Answer 1

使用绝对定位脱离父母。您还需要overflow: visible和clearfix：

.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;
}

Answer 2

This old BrainJar article是一个关于CSS定位的精彩，全面的参考。它绝对是过时的，但却出人意料地保持着良好的状态。如果你先花时间来深入了解你正在处理的底层系统，你将会经常遇到 far 这类问题。

尽管如此，对您的问题的（部分）解决方案很简单。将div.under放在div.wrap内，然后将clear: left;添加到CSS .under选择器中。请参阅this fiddle。

Answer 3

为父级定义固定大小，并使用overflow:hidden。