css - float div被下推

我不确定为什么会这样，寻找解决方案时遇到很多麻烦，所以这里很简单

的HTML

<div class="thing"></div>
<div id="big" class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div id="big" class="thing"></div>
<div class="thing"></div>

的CSS

.thing {
    background-color: blue;
    height: 100px;
    width: 80px;
    margin: 20px 0 0 20px;
    display: inline-block;
    float: left;
}

#big {
    height: 140px;
}

JSFiddle：https://jsfiddle.net/sdmq155g/1/

除非底部有一个较大的div，否则不应向下推底部的蓝色div。他们都应该在其上方的div下方直接嵌套。但是由于某些原因，尽管它们并非都直接位于上一行，但它们的所有位置都是基于第一行的较大div。

最佳答案

所有浏览器实现的盒子模型的行为与jsFiddle演示的完全一样。蓝色的div不会相互嵌套，但实际上，它们将基于上一行的最高项目从下一行开始。

您可以通过将要堆叠的div放在一列中，然后浮动这些div来克服此问题。

这里的例子：

.col {
    float: left;
    width: 80px;
}
.thing {
    background-color: blue;
    border: solid 1px red;
    height: 100px;
}

#big {
    height: 140px;
}

<div class="col">
    <div class="thing"></div>
    <div id="big" class="thing"></div>
</div>
<div class="col">
    <div id="big" class="thing"></div>
    <div class="thing"></div>
</div>
<div class="col">
    <div class="thing"></div>
    <div id="big" class="thing"></div>
</div>
<div class="col">
    <div class="thing"></div>
    <div id="big" class="thing"></div>
</div>
<div class="col">
    <div class="thing"></div>
    <div id="big" class="thing"></div>
</div>