Html 为什么我容器中的第二个div被塞住了？

我试图找到任何关于堆栈溢出的类似问题的提示，但没有任何效果。在从根本上理解

浮动

和

清除

的过程中，我遇到了一个对我来说意义不大的障碍

CSS:

.div1 {
    background-color: red;
    width: 20%;
    height: 100%;
    display: inline-block;
}
.div2 {
    background-color: blue;
    width: 60%;
    height: 600px;
    display: inline-block;
}
.container {
    height: 800px;
}

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

HTML:

.div1 {
    background-color: red;
    width: 20%;
    height: 100%;
    display: inline-block;
}
.div2 {
    background-color: blue;
    width: 60%;
    height: 600px;
    display: inline-block;
}
.container {
    height: 800px;
}

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

为什么第二个div上面有那么多空间？我理解将

float:left

添加到

div1

将如何缓解问题，因为

div2

将环绕

div1

，但我无法理解问题首先存在的原因。我希望你能解释一下。谢谢

这里有一个JSFiddle，可以快速查看我正在使用的工具：

通过“tuck under”，我猜您指的是两个块的垂直对齐

使用

display:inline block

时，该属性默认设置为

baseline

。这将导致不同高度的图元根据父图元的基线对齐

您可能期望出现垂直对齐：top的行为：

.div1{
背景色：红色；
宽度：20%；
身高：100%；
显示：内联块；
垂直对齐：顶部；
}
.第2分部{
背景颜色：蓝色；
宽度：60%；
高度：600px；
显示：内联块；
垂直对齐：顶部；
}
.集装箱{
高度：800px；
}

---

所说的“tuck”是指div之间的小空间吗？不，我知道div之间的空间是由

display:inline block

造成的，但我指的是第二个蓝色div上方的空间。为什么会有这个空间？编辑：编辑我的文章以使其更清晰