为什么我的<div>离开他们的父<div>？</div> </div>

Question

我很困惑。我希望2个div的内容根据子divs大小动态扩展其父div的高度;最多600px - 但它们只是重叠而且尺寸没有增加。有人会介意提供一些见解吗？显然，我在这里遗漏了一些东西。

以下是发生的事情：

http://puu.sh/2Vexi.png

这是我的html：

<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit perspiciatis nihil explicabo quasi veritatis ipsum. 
        </div>
        <div class="pBoxRightColumn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, architecto quis quaerat excepturi maxime.
        </div>
    </div>
</div>

这是我的css：

.pictureBoxContainer {
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #eee;
    border-radius: 4px;
    max-height: 600px;
}

.pictureBox {
    border: 1px solid #ee5;
    width:100%;
}

.testp {
    padding: 10px;
}

.pBoxLeftColumn {
    display: block;
    float: left;
    max-width: 49.99%;
}

.pBoxRightColumn {
    display: block;
    float: right;
    max-width: 49.99%;
}

Answer 1

父母通常会扩大到孩子的身高，但是如果孩子们漂浮的话也不会。

• 您可以删除浮动以完成扩展。
• 为了扩展基于浮动子节点的parentdiv，请在.pictureBox上尝试overflow: auto;。这将使.pictureBox扩展到其子节点的高度。这是显示结果的Fiddle。