以下是我的代码，我想了解为什么#firstDiv被所有浏览器向下推。我真的很想了解它的内部工作原理为什么它被向下推，而不是以某种方式向上拉。(而且我知道如何对齐它们的顶部:))
我知道它的溢出是隐藏的;这导致了它，但不确定为什么它把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/。
我最初开始回答这个问题，但在我完成之前它被锁定为欺骗，所以我把答案贴在这里。
首先，我们需要理解什么是内联块。
MDN中的定义是这样的:
元素生成一个块元素框，将与之一起流动
围绕内容，就好像它是一个内联框(行为
就像替换的元素一样)
为了理解这里发生了什么，我们需要看看vertical-align，它的默认值baseline。
在这个插图中，你有这个颜色表:
蓝色:基线
红色:行高的顶部和底部
绿色:内嵌内容框的顶部和底部。
在#left元素中，确实有一些文本内容控制基线是什么。这意味着里面的文本定义了#left的基线。
在#右侧，没有内容，所以浏览器只能使用框底部作为基线。
Se这个可视化的地方，我已经在一个例子中绘制了基线，其中第一个内联容器有一些文本，下一个是空的:
如果你特别地将一个元素对齐到顶部，你实际上是在将这个元素的顶部对齐到行框的顶部。
举个例子可能更容易理解。
div {
显示:inline-block;
宽度:100 px;
身高:150 px;
背景:灰色;
vertical-align:基线;
｝
div #{中间
vertical-align:最高;
高度:50 px
｝
正确div # {
字体大小:30 px;
身高:100像素
｝
< div id = "左" >
groovy < span > < / span >
< / div >
groovy < div id = "中间" > < / div >
groovy < div id = "正确" > < / div >
The result is this - and I added the blue baseline, and the red line box:
What happens here, is that the height of line box is depended on how the the content of the entire line is laid out. This means that to calculate the top alignment, the basline alignments must be calculated first. The #middle element has vertical-align:top, so this is not used for the baseline positioning. but the #left and #right are positioned vertically so that their baselines are aligned. When this is done, the height of the line box has increased, because the #right element has been pushed up a bit as a result of the larger font size. Then the top position for the #middle element can be calculated, and this is along the top of the line box.
我最初开始回答这个问题，但在我完成之前它被锁定为欺骗，所以我把答案贴在这里。
首先，我们需要理解什么是内联块。
MDN中的定义是这样的:
元素生成一个块元素框，将与之一起流动
围绕内容，就好像它是一个内联框(行为
就像替换的元素一样)
为了理解这里发生了什么，我们需要看看vertical-align，它的默认值baseline。
在这个插图中，你有这个颜色表:
蓝色:基线
红色:行高的顶部和底部
绿色:内嵌内容框的顶部和底部。
在#left元素中，确实有一些文本内容控制基线是什么。这意味着里面的文本定义了#left的基线。
在#右侧，没有内容，所以浏览器只能使用框底部作为基线。
Se这个可视化的地方，我已经在一个例子中绘制了基线，其中第一个内联容器有一些文本，下一个是空的:
如果你特别地将一个元素对齐到顶部，你实际上是在将这个元素的顶部对齐到行框的顶部。
举个例子可能更容易理解。
div {
显示:inline-block;
宽度:100 px;
身高:150 px;
背景:灰色;
vertical-align:基线;
｝
div #{中间
vertical-align:最高;
高度:50 px
｝
正确div # {
字体大小:30 px;
身高:100像素
｝
< div id = "左" >
groovy < span > < / span >
< / div >
groovy < div id = "中间" > < / div >
groovy < div id = "正确" > < / div >
The result is this - and I added the blue baseline, and the red line box:
What happens here, is that the height of line box is depended on how the the content of the entire line is laid out. This means that to calculate the top alignment, the basline alignments must be calculated first. The #middle element has vertical-align:top, so this is not used for the baseline positioning. but the #left and #right are positioned vertically so that their baselines are aligned. When this is done, the height of the line box has increased, because the #right element has been pushed up a bit as a result of the larger font size. Then the top position for the #middle element can be calculated, and this is along the top of the line box.
尝试使所有元素的所有CSS属性相同。
我有类似的问题，在修复这个问题时，我发现我正在删除一个具有字体属性的元素到Div元素。
在删除带有字体属性的元素后，所有DIV的对齐都被打乱了。为了解决这个问题，我将字体属性设置为所有DIV元素，与放入其中的元素相同。
在下面的例子中，类的Dropped元素”。dldCuboidButton"用font-size:30 px定义。
因此，我将相同的属性添加到其余的类，即. cuboidrecycle， . licollect， . dldcollect，这些都是由DIV元素使用的。通过这种方式，所有DIV元素在放入元素之前和之后遵循相同的测量。
.cuboidRecycle {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#cab287;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.liCollect {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#cab287;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.dldCollect {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#009933;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.dldCuboidButton {
background-color: #7c6436;
color: white; /* White text */
font-size: 30px; /* Set a font-size */
border-radius: 8px;
margin-top: 1px;
}
下面是使用上述CSS动态创建的HTML示例。
$("div#tabs").append(
"<div id='" + newTabId + "'>#" + uniqueId +
"<input type=hidden id=hdn_tmsource_" + uniqueId + " value='" + divTmpfest + "'>" +
"<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" +
"<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)' ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
"<div id='" + divDropLeCuboid + "' class=liCollect ondrop='dropForLinkExport(event)' ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
"<div id='" + divDropDwldCuboid + "' class=dldCollect ondrop='dropForTMEntry(event)' ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
"</div>"
);
查看这个替代示例。这种行为的原因在CSS3模块:line: 3.2中描述。线盒包装[1]:
一般情况下，行盒的开始边与包含它的块的开始边相接触，结束边与包含它的块的结束边相接触。但是，浮动框可能位于包含块边缘和行框边缘之间。因此，尽管在同一行内格式化上下文中的行框通常具有相同的行内进度推进(包含块的行内进度推进)，但如果可用的行内进度空间由于浮动而减少，它们可能会有所不同[…]
如您所见，第三个元素被向下推，尽管它没有overflow属性。原因一定在别的地方。你注意到的第二个行为描述在级联样式表Level 2 Revision 1 (CSS 2.1) Specification: 9.5 Floats [2]:
由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。但是，在浮动旁边创建的当前和后续行框将根据需要缩短，以便为浮动的边距框腾出空间。
所有你的显示:inline-block;线高计算:' Line -height'和'vertical-align'属性(very end) [3]:
'inline-block'的基线是它在正常流中的最后一个行框的基线，除非它没有流中的行框，或者它的'overflow'属性有一个计算值而不是'visible'，在这种情况下基线是底边距。
So when you're using floating elements and inline-block elements, the floating element will be pushed to the side and the inline formatting will be recalculated according to 1. On the other hand, the next elements are shortened if they won't fit. Since you're already working with a minimum amount of space, there's no other way to modify your elements then pushing them 2. In this case, the highest element will define the size of your wrapping div, thus defining the baseline 3, while on the other hand the modification of position and width stated in 2 can't be applied to such minimal spaced maximum height elements. In this case a behavior as in my very first demo will result.
最后，溢出:隐藏的原因将防止#firstDiv被推到#container的下边缘，尽管我在第11节中找不到原因。没有溢出:隐藏它的工作方式与2和3所定义的不同。演示
TL;DR:仔细研究一下W3推荐和浏览器中的实现。在我看来，如果你不知道浮动元素对周围元素的所有改变，它们就会显示出意想不到的行为。这是另一个演示，展示了一个常见的问题与浮动。
