浮动2（或更多）div如何工作？

Question

当我将#p1设置为float:left时，只有#p2的内容环绕浮动#p1而不是div#p2。{{1} }似乎只出现在浏览器的左边缘（如Chrome开发者工具中所示）。但是，当我将 divs 设置为div#p2时，内容以及容器都会回绕彼此。为什么会这样？

float:left

#p1 {
  background-color: blue;
  border: 1px solid black;
  float: left;
  width: 100px;
}
#p2 {
  background-color: red;
  border: 1px solid black;
  width: 100px;
  float: left;
}

<title>Floating Divs</title>
<h1>Floating Divs</h1>
<div>
  <div id="p1">DIV</div>
  <div id="p2">DIVDIVDIV</div>
</div>

#p1 {
  background-color: blue;
  border: 1px solid black;
  float: left;
  width: 100px;
}
#p2 {
  background-color: red;
  border: 1px solid black;
  width: 100px;
}

Answer 1

CSS 2.1规范中描述的precise rules for floats在第2点中说明：

  

如果当前框是左浮动的，并且有任何左浮动   由源文档中较早的元素生成的框，然后为   每个这样的早期框，或者当前框的左外边缘   必须在前面框的右外边缘右侧，或   它的顶部必须低于前面框的底部。类似   规则适用于右浮箱。

因此#p2浮动时会避免#p1。当它没有浮动时，它将忽略#p1的存在。但是，#p2中包含的行框避免了浮动#p1，导致#p2的高度增长到足以允许它包含该行框。