为什么要往下推这个内联块元素？

Question

为什么要往下推这个内联块元素？下面是我的代码，我想了解为什么#FirstDiv正在被所有浏览器向下推。我真的很想理解为什么它被向下推而不是以某种方式向上拉的事实的内在运作。(我知道如何对齐他们的顶部：)我知道它的溢出：隐藏的，这是导致它，但不确定它为什么要把它向下。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/.

Answer 1

只管用vertical-align:top;

演示

Answer 2

视点这，这个另一个例子。此类行为的原因将在CSS 3模块：行：3.2。线箱包装[1]:

一般来说，线框的起始边缘与其包含块的起始边缘相接触，而末端边缘则触及其包含块的末端边缘。但是，浮动框可能位于包含块边缘和行框边缘之间。因此，虽然相同内联格式上下文中的行框通常具有相同的行内推进(包含块的行内进度)，但如果可用内联级数空间由于浮动而减少[.]，则可能会有所不同。

如您所见，第三个元素被向下推，尽管它没有overflow财产。原因肯定是在别的地方。您注意到的第二个行为在级联样式表2级修订1(CSS 2.1)规范：9.5浮标[2]:

由于浮点数不在流中，所以在浮点数框之前和之后创建的非定位块框垂直地流动，就好像浮点数不存在一样。但是，在浮点数旁边创建的当前和后续行框在必要时会被缩短，以便为浮动的边距框腾出空间。

你所有的display:inline-block;DVS正在使用一种特殊的baseline在这种情况下10.8线高计算：“线高”和“垂直对齐”属性(极尾)[3]:

“内联块”的基线是其在正常流中的最后一行框的基线，除非它没有流内行框，或者它的“溢出”属性具有“可见”以外的计算值，在这种情况下，基线是底部边距。

所以当你使用浮动元素inline-block元素时，浮动元素将被推送到旁边，内联格式将根据1..另一方面，如果下一个元素不合适的话，它们就会被缩短。由于您已经使用了最少的空间，因此没有其他方法可以修改元素然后推送它们2..在这种情况下，最高元素将定义包装div的大小，从而定义baseline 3中所述的位置和宽度的修改。2不能应用于这种最小间距的最大高度元素。在这种情况下，我的第一个演示将产生一个行为。

最后，你overflow:hidden会防止#firstDiv被推到你的下边#container虽然我找不到理由第11条..无overflow:hidden它的工作方式是例外的，并由2和3. 演示

TL；DR：仔细查看W3建议和浏览器中的实现。在我看来，浮动元素决定表现出意想不到的行为，如果您不知道它们对您周围的元素所做的所有更改。这是另一个演示这显示了浮标的一个常见问题。