为何为red类添加float:left后，green元素溢出父容器div？

初始代码 #

HTML结构 #

<body>
    <div class="parent">
      <div class="red">1</div>
      <div class="green">2</div>
    </div>
</body>

初始CSS样式 #

.red {
  width: 150px;
  height: 150px;
  background-color: red;
}
.green {
  width: 150px;
  height: 150px;
  background-color: green;
}
.parent {
  background-color: yellow;
}

原因解析 #

这个现象本质是浮动元素脱离正常文档流引发的父容器高度坍塌，具体逻辑如下：

• 初始状态下，.red和.green都是正常文档流中的块级元素，会垂直排列，共同撑开父容器.parent的高度（总高度为300px），所以两个子元素都完全处于黄色的.parent背景范围内。
• 当给.red添加float:left后，.red会脱离正常文档流：它不再参与.parent的高度计算，而是“漂浮”在文档流上方。此时.parent的高度只会由正常文档流中的.green元素撑开，变为150px。
• 作为块级元素的.green，布局规则是自身盒子会占据.parent的整个宽度，但内容会自动绕开左侧的浮动元素.red。此时.green的高度是150px，和.parent的高度一致，但因为.red也占据了150px高度且超出了.parent的高度范围，视觉上容易误以为.green也溢出了.parent——实际上是.parent高度坍塌后，.red和.green的底部都超出了.parent的背景区域，.green本身的盒子仍在.parent范围内。

内容的提问来源于stack exchange，提问作者SureN