为什么将内联块元素向下推？

Question

以下是我的代码，我想理解 为什么 #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>

Answer 1

基本上，您在代码中添加了更多的混乱情况，这造成了更多的混乱，因此，首先，我尝试消除妨碍理解真正问题的混乱情况。

首先，我们必须确定真正的问题是什么？ 其“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;检查他们现在是否具有相同的基准？

现在，我们已经证明了我们的第一点。

• 第二点详细

好了，在解释了第一点之后，第二点很容易理解，您会看到将溢出属性设置为可见（隐藏）以外的第一格的底边在该线的基线上。