嵌套的Div标签未被父Div包围

Question

所以我想在里面制作一个带有4个div框的盒子。 4个子div框都在同一水平轴上。它看起来很好，除了父div的外边界由于某种原因只是顶部的一条线。所以孩子们认为我不认为是父母。我想我搞砸了css中的一些东西。 HTML：

<div class="summaryBox">
        <div class="img1">
            <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
        </div>
        <div class="sum1">
            <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
        </div>
        <div class="img2">
            <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
        </div>
        <div class="sum2">
            <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
        </div>
</div>

CSS：

.summaryBox {
        border: 1px solid green ;
        width: 80%;
        margin: auto;
}

.summaryBox .img1 {
        width: 17%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .img2 {
        width: 17%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .sum1 {
        width: 17%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .sum2 {
        width: 17%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}