以下是我的代码，我想理解 为什么 #firstDiv被所有浏览器向下推。我真的很想 了解 以下事实的内部运作原理：为什么将其向下而不是以一种或另一种方式向上拉。（而且我知道如何对齐它们的顶部：））
而且我知道它的overflow：hidden是导致它的原因，但不确定为什么将div向下推。
body { width: 350px; margin: 0px auto; } #container { border: 15px solid orange; } #firstDiv { border: 10px solid brown; display: inline-block; width: 70px; overflow: hidden; } #secondDiv { border: 10px solid skyblue; float: left; width: 70px; } #thirdDiv { display: inline-block; border: 5px solid yellowgreen; } <div id="container"> <div id="firstDiv">FIRST</div> <div id="secondDiv">SECOND</div> <div id="thirdDiv">THIRD <br>some more content<br> some more content </div> </div>
基本上，您在代码中添加了更多的混乱情况，这造成了更多的混乱，因此，首先，我尝试消除妨碍理解真正问题的混乱情况。
首先，我们必须确定真正的问题是什么？ 其“inline-block”元素为何被向下推。
inline-block
现在我们开始理解它，并先消除混乱。
1- 为什么不给所有三个div相同的边框宽度？ 让我们给它。
2- 浮动元素和向下插入的内嵌块元素有什么联系吗？不，与它无关。
因此，我们完全删除了该div。您还看到内联块元素被向下推的相同行为。
现在轮到一些文献来理解线框的概念，以及如何将它们放在同一行中，特别是仔细阅读最后一段，因为这是您问题的答案。
“ inline-block”的基线是正常流中其最后一个线框的基线，除非它没有流入流线框，或者如果其“ overflow”属性的计算值不是“ visible”，则在这种情况下，基线是下边距。
如果您不确定基线，那么这里是简单的简短解释。
除了’gjpqy’以外的所有字符都写在基线上，您可以认为基线就像您在这些“随机字符”下方绘制一条与下划线相同的简单水平线一样，它将成为基线，但现在如果您编写任何“gjpqy”同一行上的一个或多个字符，则这些字符的下部将落在该行下方。
因此，可以说除“ gjpqy”以外的所有字符都完全写在基线之上，而这些字符的某些部分则写在基线之下。
3-为什么不检查生产线的基线在哪里？我添加了一些字符来显示该行的基线。
4- 为什么不在我们的div中添加一些字符以在div中找到其基线？此处，在div中添加了一些字符以阐明基线。
现在，当您了解基线时，请阅读以下有关内联块基线的简化版本。
i）如果有问题的内联块的溢出属性设置为可见（默认情况下，因此无需设置）。 然后，其基线将是该行包含块的基线。
ii）如果所讨论的内联块的溢出属性设置为“其他可见”。 然后，其底边距将在包含框的线的基线上。
现在再来看一看，以澄清您的概念greendiv发生了什么。如果仍然有任何困惑，则在此处添加更多靠近绿色div的字符以建立包含块的基线，并对齐绿色div基线。
好吧，我现在声称它们具有相同的基准？对？
5- 那么为什么不重叠它们，看看它们是否彼此合适？因此，我带来了第三个div -left：35px;检查他们现在是否具有相同的基准？
现在，我们已经证明了我们的第一点。
好了，在解释了第一点之后，第二点很容易理解，您会看到将溢出属性设置为可见（隐藏）以外的第一格的底边在该线的基线上。
