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

Question

我很困惑 我希望2个div的内容根据子div的大小动态扩展其父div的高度；最高为600像素-但它们只是重叠而没有增加尺寸。有人介意提供一些见识吗？显然我在这里缺少什么。

这是正在发生的事情：

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

父母通常会扩展到孩子的高度，但如果孩子漂浮，则不会。

• 您可以删除浮动来完成扩展。
• 为了扩展基于浮动子项的父级div，请尝试overflow: auto;使用.pictureBox。这将使 .pictureBox 扩展到其子级的高度。这是显示结果的小提琴。