浮动时图像掉落Div

Question

我的网站的这一部分有很多图像，需要叠加成两列。

我的宽度都是正确的和边距，看起来真的很棒！但是，只要我将float: left添加到图片中，就会出现问题。

我在每个内容部分的底部都有一个边框，当我浮动它们时，图像会落在该边框的下方。我试过改变显示模式和其他一些东西，但我不知道出了什么问题。

Here is a JSFiddle for my code.

Answer 1

您需要在包装图像的部分上使用clearfix。试试Nicolas Gallagher的micro clearfix。

Answer 2

将图像的父级（我建议使用div）定位为相对并添加overflow：auto。

CSS文件：

.content{
    position:relative;
    overflow:auto;
}
.data_files{
    float:left;
}

HTML：

<div class="content">
    <div class="data_files>
        /*here your photos*/
    </div>
</div>