基本上，你已经在你的代码中添加了更多的混乱，这造成了更多的混乱，所以首先我试着删除阻碍理解真正问题的混乱。
首先我们要确定真正的问题是什么?
这就是为什么“inline-block”元素被向下推。
现在我们开始理解它，并首先清除混乱。
1 -
为什么不给所有三个div相同的边界宽度?
让我们给它。
2 -浮动元素是否与向下推的内联块元素有任何联系?
不，跟这没关系。
因此，我们已经完全删除了这个div。你看到了内联块元素向下推的相同行为。
现在轮到一些文献来掌握行盒的思想，以及它们如何在同一行中排列(特别是仔细阅读最后一段，因为这是你问题的答案)。
'inline-block'的基线是它在正常流中的最后一个行框的基线，除非它没有流中的行框，或者它的'overflow'属性有一个计算值而不是'visible'，在这种情况下基线是底边距。
如果你不确定基线，那么这里是简单的解释。
除了“gjpqy”之外的所有字符都写在基线上，你可以把基线想象成如果你画一条简单的水平线，就像在这些“随机字符”下面画下划线一样，那么它将是基线，但现在如果你在同一条线上写任何“gjpqy”字符，那么这些字符的较低部分将落在线以下。
因此，我们可以说，除了'gjpqy'之外的所有字符都完全写在基线之上，而这些字符的一部分写在基线之下。
3 -为什么不检查我们的底线在哪里?
我增加了几个字符，显示我们的底线。
4 -为什么不添加一些字符在我们的div也找到他们的基线在div?
这里，在div中添加了一些字符以澄清基线。
现在，当你理解了基线，阅读以下关于内联块基线的简化版本。
i)如果inline-block的overflow属性被设置为可见(这是默认的，所以不需要设置)。
那么它的基线将是该行包含块的基线。
ii)如果inline-block的overflow属性设置为OTHER THAN visible。
那么它的底边距将在包含框的线的基线上。
第一点
现在再看一遍，阐明绿色div的概念。
如果还有任何混淆，则在这里添加更多靠近绿色div的字符，以建立包含块的基线，并对齐绿色div基线。
我现在说他们有相同的基线?对吧?
5 -那么为什么不把它们重叠起来，看看它们是否适合彼此?
因此，我引入第三个div -left: 35px;检查他们现在是否有相同的基线?
现在，我们已经证明了第一点。
第二点细节
好了，在解释了第一点之后，第二点就很容易理解了，你会看到第一个div的溢出属性设置为除了可见(隐藏)之外，它的底边距在一行的基线上。
现在，你可以做几个实验来进一步说明。
设置第一个div overflow:visible(或完全删除它)。
设置第二个div溢出:除可见之外。
设置两个div溢出:除了可见。
现在把你那些乱七八糟的东西拿回来，看看你是否觉得一切都好。
返回浮动的div(当然需要这样做
增加身体的宽度)
你看，它没有效果。
带回相同的奇数边距。
将绿色div设置为溢出:在你的问题中可见(这种不对齐是由于边界宽度从1px增加到5px，所以如果调整为负向左，你会发现没有问题)
现在删除我添加的额外字符
的理解。(当然，去掉左边的负)
最后减少身体宽度，因为我们不再需要更宽的身体。
现在我们又回到了起点。
希望我已经回答了你的问题。
