为什么这个内联块元素被向下推？

以下是我的代码，我想了解这一点why #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>

http://jsfiddle.net/WGCyu/ http://jsfiddle.net/WGCyu/.

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

首先我们必须确定真正的问题是什么？这就是为什么“inline-block" 元素被向下推。

现在我们开始理解它并首先消除混乱。

1 -为什么不给所有三个 div 相同的边框宽度？我们给吧。 http://jsfiddle.net/WGCyu/41/

2 -浮动元素与内联块元素被向下推有什么联系吗？ 不，与此无关。

So, 我们已经完全删除了那个 div http://jsfiddle.net/WGCyu/42/。您正在目睹内联块元素被向下推的相同行为。

轮到一些人了文学 http://www.w3.org/TR/CSS2/visudet.html#leading要掌握行框的概念以及它们如何排列在同一行中，特别是仔细阅读最后一段，因为这就是您问题的答案。

'inline-block' 的基线是其在正常流中最后一个行框的基线，除非它没有流内行框或者其 'overflow' 属性具有除 'visible' 以外的计算值，在在这种情况下，基线是底部边距边缘。

如果您不确定baseline http://www.w3.org/TR/CSS2/visudet.html#leading那么这里用简单的话进行简要解释。

除“gjpqy”之外的所有字符都写在基线上，您可以将基线视为就好像在这些“随机字符”正下方画一条简单的水平线，与在这些“随机字符”正下方划线相同，那么它将是基线，但现在如果您写任何“gjpqy”如果字符位于同一行，则这些字符的下部将落在该行下方。

因此，我们可以说，除了“gjpqy”之外的所有字符都完全写在基线之上，而这些字符的某些部分写在基线之下。

3 -为什么不检查一下我们的线的基线在哪里呢？ 我已经添加了显示基线的几个字符 http://jsfiddle.net/WGCyu/43/我们的线。

4 -为什么不在我们的 div 中添加一些字符来找到它们在 div 中的基线呢？ 这里，在 div 中添加一些字符以澄清基线 http://jsfiddle.net/WGCyu/44/.

现在，当您了解基线时，请阅读以下有关内联块基线的简化版本。

i) 如果有问题的内联块将其溢出属性设置为可见（默认情况下，因此无需设置）。 那么它的基线将是该行包含块的基线。