为什么这个内联块元素向下推？
以下是我的代码，我想了解为什么 #firstDiv被所有浏览器向下推。 我真的很想了解这个事实的内在原因，即为什么它被推倒下来而不是以某种方式拉上去。 （我知道如何alignment他们的上衣:)）
而且我知道，它的溢出：隐藏是造成它，但不知道为什么它推动这个股下跌。
<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> 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; } http://jsfiddle.net/WGCyu/ 。
基本上你已经在你的代码中添加了更多的混乱，这造成了更多的混淆，所以首先我试图去除混乱，阻碍了解真正的问题。
首先，我们必须确定真正的问题是什么？ 这就是为什么“ inline-block ”元素被向下推。
现在我们开始了解它，并首先消除混乱。
1 –为什么不给所有三个div相同的边框宽度？ 让我们给它。
2 –浮动元素是否与向下推动的内嵌块元素有任何联系？ 不，与它无关。
所以， 我们已经完全删除了这个div 。 而且你正目睹行内块元素被推向下的相同行为。
这里有一些文学的转向来把握线盒的思想，以及如何仔细阅读最后一段，因为这是你问题的答案。
“内联块”的基线是正常stream程中最后一个线框的基线，除非其中没有stream入线框或“溢出”属性的计算值不是“可见”，否则这种情况下的基线是底部边缘。
如果你不清楚基线，那么简单的解释就是简单的解释。
除了'gjpqy'以外的所有字符都写在基线上，你可以想象基线，就好像你在这些“随机字符”的下面画一个简单的水平线一样，那么它将成为基线，但是现在如果你写了任何'gjpqy'在同一行上的字符，那么这些字符的下半部分将落在该行的下面。
所以，我们可以说除了'gjpqy'之外的所有字符都是完全写在基线之上，而这些字符的一部分写在基线之下。
3 –为什么不检查我们线路的基线？ 我添加了几个字符，显示了我们的行的基线 。
4 –为什么不在我们的div中添加一些字符来finddiv的基线？ 在这里， 一些字符添加在divs来澄清基线 。
现在，当您了解基线时，请阅读以下关于embedded块基线的简化版本。
i）如果内联块有溢出属性设置为可见（这是默认情况下，所以不需要设置）。 那么它的基线将是该线路的包含区段的基线。
ii）如果内联块的溢出属性设置为OTHER THAN可见。 那么它的底部边界将在包含框的行的基线上。
- 首先详细点
现在再看看这个来澄清你的概念，绿色div发生了什么 。 如果还有任何混淆，那么在这里添加更多接近绿色div的字符来build立包含块的基线，并且绿色div基线被alignment。
那么，我现在声称他们有相同的基准？ 对？
5 –那么为什么不重叠他们，看看他们是否适合彼此？ 所以，我带了第三个 – 左：35px; 检查他们现在是否有相同的基线 ？
现在，我们已经得到了我们的第一点certificate。
- 第二点详细
那么，第一点第二点的解释是易于消化，你看到溢出属性设置为不可见（隐藏）以外的第一个div的底线在底线上。
现在，你可以做几个实验来进一步说明它。
- 设置第一个div溢出：可见（或完全删除） 。
- 设置第二个div溢出：除了可见 。
- 设置两个div溢出：除了可见 。
现在把你的混乱，看看是否一切看起来很好给你。
- 带回你的浮动div （当然有需要
增加一些身体的宽度）你看它没有效果。 - 带回相同的奇数利润 。
- 设置绿色div溢出：在你的问题中设置可见 （这种错位是由于边界宽度从1px增加到5px，所以如果调整负值，你会看到没有问题）
- 现在删除我添加的其他字符，以帮助理解 。 （当然，删除负左）
- 最后减less身体宽度，因为我们不再需要更宽的一个。
现在我们回到了我们开始的地方。
希望我已经回答了你的问题。
CSS中vertical-align的默认值是baseline ，这个规则也适用于inline-block阅读这个http://www.brunildo.org/test/inline-block.html
在你的inline-block DIV中写vertical-align:top 。
只需使用vertical-align:top;
演示
查看这个替代的例子。 这种行为的原因在CSS3模块中描述：line：3.2。 线盒包装[1] ：
一般来说，线框的起始边缘触及其包含块的起始边缘，并且结束边缘触及其包含块的结束边缘。 但是，浮动框可能会出现在包含块边缘和线框边缘之间。 因此，虽然线内格式化上下文中的线框通常具有相同的内联级数提升（包含块的内联级数），但如果可用的内联级数空间由于浮点数而减less，
如您所见，第三个元素被向下推，尽pipe它没有overflow属性。 原因必须在别的地方find。 您注意到的第二个行为在层叠样式表级别2修订版本1（CSS 2.1）中进行了说明规范：9.5浮点数[2] ：
由于浮动不在stream程中，所以在浮动框之前和之后创build的未定位块框垂直stream动，就好像浮动不存在一样。 然而，根据需要缩短在浮动物旁边创build的当前和随后的线框，以便为浮动物的边距框腾出空间。
所有的display:inline-block; div在这种情况下使用了一种特殊的baseline 10.8线高计算：'line-height'和'vertical-align'属性（非常结束）[3] ：
“内联块”的基线是正常stream程中最后一个线框的基线，除非其中没有stream入线框或“溢出”属性的计算值不是“可见”，否则这种情况下的基线是底部边缘。
所以当你使用浮动元素和inline-block元素时，浮动元素将被推到一边，并且内联格式将被重新计算。 另一方面，如果他们不适合，下一个要素就缩短了。 由于您已经在使用最小的空间，所以没有其他方法来修改元素，然后将其推送2 。 在这种情况下，最高元素将定义包装div的大小，从而定义baseline 3 ，而另一方面，以2表示的位置和宽度的修改不能应用于这样的最小间隔最大高度元素。 在这种情况下，我的第一个演示会导致行为。
最后，你的overflow:hidden的原因会阻止#firstDiv被推到你的#container的下边缘，尽pipe我在11节找不到原因。 没有overflow:hidden它作为例外和2和3定义。 演示
TL; DR：仔细看看W3的build议和浏览器的实现。 在我的小见解中，浮动元素决定了如果你不知道他们对周围元素所做的所有改变，都会显示出意想不到的行为。 这是另外一个演示 ，它显示了浮动的一个常见问题。
问题是因为你在第二个div上应用了float：left。 这使得第二个div在左边，第一个div落在第二个div之后。 如果你在第一个div上应用float：left，你的问题就会消失。
overflow：hidden对你的布局没有任何问题，overflow：hidden只影响div的内部元素，与其他元素无关。
尝试添加padding:0; 去身体和删除你的div的边缘。
添加background-color:*any除背景之外的background-color:*any颜色*以检查差异。
