css - 为什么这个段落元素会溢出它下面的 div？为什么那个 div 留在原地？

Question

http://cowperthwaite.dev.mybusinessadmin.com/location/51656/103_carman_avenue/

在该页面上，您可以看到下面的黄色背景框保持不变，并且段落在其顶部爆炸。我一生都无法弄清楚为什么会这样。黄色背景的框没有设置为position:absolute;或任何东西。这些部分都不是……但无论如何，该段落仍然溢出。

这是HTML：

<div class="descriptionMap">
    <div class="leftcolumn">
        <h1><?php echo $address; ?></h1>
        <p><?php echo nl2br($description) ?></p>
    </div>
    <div class="rightcolumn">
        <?php echo($googleMapEmbedCode); ?>
    </div>
</div>
<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            <?php
                echo "<div class='pBoxLargeImageContainer'>";
                echo "<img src='$pictureLinks[0]' id='largeImage' alt='Primary Image' class='pBoxLargeImage'>";
                echo "</div>";
            ?>
        </div>
        <div class="pBoxRightColumn">
            <?php
            foreach ($pictureLinks as $picture)
            {
                echo "<div class='pBoxSmallImageContainer'>";
                echo "<img src='$picture' alt='Thumbnail' class='pBoxSmallImage'>";
                echo "</div>";
            }
            ?>
        </div>
    </div>
</div>

这是CSS：

.leftcolumn {
    float:left;
    max-width: 50%;
    display:inline-block;
    overflow:scroll;
}

.rightcolumn {
    float:right;
    max-width: 50%;
    display:inline-block;
}

.pictureBoxContainer {
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #F7D961;
    border-radius: 12px;
    max-height: 350px;
    min-height: 325px;
}

.pictureBox {
    background-color: #FFF;
    border-radius: 12px;
    width: 97%;
    overflow: auto;
    padding: 12px;
    max-height: 300px;
    min-height: 299px;
}

.pBoxLeftColumn {
    display: block;
    left: 25px;
    max-width: 49.99%;
    min-width: 49.99%;
    position: absolute;
    top: 25px;
}

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

.pBoxSmallImageContainer {
    height: 103px;
    width: 145px;
    float: left;
    padding: 3px;
    margin: 3px;
    background-color: #F7D961;
    border-radius: 2px;
    position: relative;
}

.pBoxSmallImage {
    max-height: 95px;
    max-width: 138px;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pBoxLargeImageContainer {
    width: 100%;
}

.pBoxLargeImage {
    border-radius: 6px;
    min-width: 450px;
    max-height: 300px;
}

有任何想法吗？我在这里想念什么？

Answer 1

<div class="descriptionMap clearfix">

.clearfix 类将清除您在 descriptionMap 容器中的浮动。