为什么内联块和块在浮动元素附近表现不同？

Question

我注意到当内嵌块和块位于浮动元素附近时行为不同：块的背景在浮动元素下延伸，而内联块完全包裹它。

div是一个块：

div {
  height: 5em;
  width: 5em
}

div:first-child {
  background: #27A5CC;
  float: left
}

div:nth-child(2) {
  width: 6em;
  background: #EEEEEE
}

div是一个内嵌块：

div {
  height: 5em;
  width: 5em
}

div:first-child {
  background: #27A5CC;
  float: left
}

div:nth-child(2) {
  width: 6em;
  background: #EEEEEE;
  display: inline-block
}

有解释吗？

Answer 1

我将假设您了解block和inline-block显示之间的区别。现在让我们看看floats如何工作：

  

浮动是一个在当前向左或向右移动的框   线。 [...]内容从左侧浮动框的右侧流下   在右侧浮动的盒子的左侧。

     

浮动框向左或向右移动直到其外边缘   触摸包含块边缘或另一个浮动的外边缘。   如果有线框，则浮动框的外部顶部对齐   与当前行框的顶部。 [...]

     

由于浮动不在流中，因此创建了未定位的块框   在浮动箱垂直流动之前和之后，好像浮子没有   存在。但是，旁边创建的当前和后续行框   必要时缩短浮子以为边缘盒腾出空间   浮动。

您的示例说明如下：

示例1

第一个div是浮动的。它被取出流动并与父母的左侧对齐。第二个div也从左侧开始忽略第一个div，好像它不存在一样。

结果：两个div最终都是左上角相互对齐。

示例2

第一个div是浮动的。它被取出流动并与父母的左侧对齐。第二个div是内联块元素，因此它遵循适用于内容流和行框的规则。它开始渲染到第一个div 的右侧，就像普通文本一样。

结果：第二个div与第一个div的右侧对齐。