css - 可能导致这种情况的原因是什么？

Question

我有一个外部div（蓝色）和一个内部div。我不确定它对相邻的div有什么影响。有任何想法吗？删除内部div的内容会使其恢复正常。

编辑＃1

这是一张新图片和css。似乎配对盒正在引起一些垂直偏移。

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.wide-box {
    border: 1px solid blue;
    margin-top: 10px;
    min-height: 100px;
    width: 450px;
}

.clearfix {
    display: inline-block;
}
.pairings-box {
    border: 1px solid black;
    float: left;
    width: 300px;
}

<div class='wide-box clearfix'></div>

<div class='wide-box clearfix'></div>

<div class='wide-box clearfix'>
  <div class='pairings-box'>here is some text</div>
</div>

<div class='wide-box clearfix'></div>

Answer 1

尝试将其中的内容浮动。

浮动here

之前的示例

浮动here

之后的示例

Answer 2

我不相信蓝色<div>有display: block;的建议。 display: inline-block;显示的行为正常。