下面是我的代码，我想了解为什么所有浏览器都向下推firstDiv。我真的想了解为什么它会被向下推，而不是以这样或那样的方式向上拉。（我知道如何对齐它们的顶部：））
我知道它的溢出是隐藏的，这是导致它的原因，但不确定它为什么会向下推动那个div
正文{
宽度：350px；
保证金：0px自动；
}
#容器{
边框：15px实心橙色；
}
#第一组{
边框：10px纯棕色；
显示：内联块；
宽度：70px；
溢出：隐藏；
}
#二等兵{
边框：10px纯色天蓝色；
浮动：左；
宽度：70px；
}
#第三{
显示：内联块；
边框：5px实心黄绿色；
}<；div id=“容器”>；
<；div id=“firstDiv”>；第一</部门>；
<；div id=“secondDiv”>；第二</部门>；
<；div id=“thirdDiv”>；第三
<；br>；更多内容<；br>；更多内容
</部门>；
</部门>http://jsfiddle.net/WGCyu/.
基本上，您在代码中添加了更多的混乱，这会造成更多的混乱，因此，首先，我尝试消除阻碍理解真正问题的混乱
首先，我们必须确定真正的问题是什么？
这就是“inline block”元素被向下推的原因。
现在我们开始理解它，并首先消除混乱
1-
为什么不给所有三个div相同的边框宽度？
让我们给它
2-浮动元素是否与向下推动的内联块元素有任何连接？
不，与此无关
因此，我们已经删除了该div。你们会看到内联块元素被向下推的行为
现在轮到一些文献来掌握行框的概念，以及它们如何排列在同一行中，特别是仔细阅读最后一段，因为你的问题的答案就在这里
“内联块”的基线是其在正常流中最后一个行框的基线，除非其没有内联行框，或者其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边距边缘
如果您不确定基线，那么这里将用简单的文字进行简要解释
除“gjpqy”之外的所有字符都写在基线上。您可以将基线看作是在这些“随机字符”的正下方画一条与下划线相同的简单水平线，然后它将成为基线，但现在如果您在同一行上写任何“gjpqy”字符，则这些字符的下半部分将落在该行下方
因此，我们可以说，除了“gjpqy”之外的所有字符都完全写在基线之上，而这些字符的某些部分写在基线之下
3-为什么不检查我们生产线的基线在哪里？
我已经添加了几个字符来显示我们行的基线
4-为什么不在div中添加一些字符，以便在div中找到它们的基线？
这里，在div中添加了一些字符以澄清基线
现在，当您了解了基线后，请阅读以下关于内联块基线的简化版本
i）如果有问题的内联块的溢出属性设置为可见（默认情况下，无需设置）。
然后它的基线将是该行包含块的基线。
ii）如果有问题的内联块的溢出属性设置为“非可见”。
然后它的底部边距将位于包含框的行的基线上。
- 详细的第一点
现在再看一遍，以澄清您的概念，即green div发生了什么。
如果还存在任何混淆，则在此处添加更多靠近绿色div的字符，以建立包含块的基线，并对齐绿色div基线
那么，我现在声称他们有相同的基线？对吧?
5-那么为什么不把它们重叠起来，看看它们彼此是否合适？
所以，我带来了第三个div-left:35px；检查他们现在是否有相同的基线
现在，我们已经证明了我们的第一点
- 详细的第二点
在解释了第一点之后，第二点很容易理解，您可以看到，第一个div的溢出属性设置为非可见（隐藏）的，它的底边距在该行的基线上
现在，您可以做两个实验来进一步说明这一点
- 设置第一个div溢出：可见（或将其全部删除）
- 设置第二个div溢出：不可见
- 设置两个div溢出：不可见
现在把你的杂物拿回来，看看你是否觉得一切都很好
- 带回您的浮动div（当然需要
增加身体的宽度）
你看它没有效果 - 带回来同样的奇数页边距
- 将绿色div设置为overflow：在您的问题中设置时可见（未对齐是由于边框宽度从1px增加到5px，因此如果调整负数left，您将看到没有问题）
- 现在删除我添加到中的其他字符
理解力（当然要去掉左底片） - 最后减少身体宽度，因为我们不再需要更宽的身体
现在我们又回到了起点
希望我已经回答了你的问题