浮动塌陷复现失败：父元素为什么一直不塌

我想用一个左右对照页，演示经典的「父元素高度塌陷」：左侧子元素全部 float: left，父元素不包住它们；右侧加上 overflow: hidden，触发 BFC，高度恢复正常。

页面写完以后，左侧并没有塌。背景还在，边框也还在，和右侧几乎一样。连续改了两轮标记，塌陷才出现。挡住它的不是浏览器坏了，而是页面里另外两处样式已经把浮动包住了。

实验想看到的现象

子元素一旦浮动，就脱离普通文档流，不再给父元素贡献高度。父元素里如果只剩下浮动子元素，内容高度会变成 0，背景看起来就像消失了。

overflow: hidden 能修复这件事，是因为它让父元素成为块级格式化上下文（BFC）。BFC 计算高度时会把内部浮动元素算进去。

对照页就是按这个预期写的：左侧不设 overflow，右侧设置 overflow: hidden。

第一次：文字还在，而且 `clear: both` 把父元素撑开了

第一版左侧盒子里不只有三个浮动方块，还有标题、说明，以及一段带清除浮动的文字：

html 复制代码

<div class="box-collapse">
  <h3>左侧：未修复 (塌陷)</h3>
  <p>观察：父元素背景色消失，高度为 0。</p>
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
  <p class="normal-text">这段文字会跑到最上面去，因为父元素没高度。</p>
</div>

css 复制代码

.box-collapse .child {
  float: left;
}

.normal-text {
  clear: both;
  margin-top: 10px;
}

实际效果是左右两边都有完整背景，文字也都在方块下方：

这里有两层原因。

h3 和上面那句说明没有浮动，它们仍在普通文档流里，父元素至少会按这两块内容计算高度。

更决定性的是 .normal-text { clear: both }。clear: both 会把这段文字推到前面所有浮动元素的下面。这段文字自己还在文档流中，父元素必须包住它，高度就会一路延伸到文字底部，三个浮动方块也被包了进去。

所以图里的现象和注释写反了：文字没有跑到最上面，父元素背景也没有消失。clear: both 本身就是一种包住浮动的写法。这段「用来证明塌陷」的文字，正好阻止了塌陷。

右侧的 overflow: hidden 在这一版里也看不出作用，因为两侧都被 clear: both 撑开了。

第二次：只剩浮动子元素，父元素还是不塌

我把标题、说明和 clear: both 都删掉，两侧只保留浮动方块。按教科书，左侧这时应该塌掉。结果背景仍然包住了整行方块：

这一次挡住塌陷的是外层容器：

css 复制代码

.container {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.box-collapse 和 .box-fixed 都是这个 flex 容器的子项。flex 项会为自己的内容建立一个独立的格式化上下文。独立格式化上下文在包住浮动这件事上和 BFC 一样：高度会算上内部浮动元素。

左侧虽然没写 overflow: hidden，但作为 flex 项，已经具备了包住浮动的能力。右侧再写 overflow: hidden，只是重复触发了同一种包裹。两边因此又长得一样。

这也说明：overflow: hidden 不是修复塌陷的唯一入口。父元素只要因为别的原因形成了能包住浮动的格式化上下文，塌陷就不会出现。flex 项、grid 项都属于这种情况。

第三次：父元素回到普通块级盒子，塌陷出现了

去掉 .container 的 display: flex，两个盒子改成普通块级元素上下排列，左侧才出现预期中的塌陷：

对应结构是：

html 复制代码

<div class="box-collapse">
  <div class="child">子元素1</div>
  <!-- 其余子元素同样 float: left -->
</div>

<div class="box-fixed">
  <div class="child">子元素1</div>
  <!-- 同样是浮动子元素 -->
</div>

css 复制代码

.box-collapse {
  width: 100%;
  border: 2px dashed #ff6b6b;
  padding: 10px;
  background-color: #ffecec;
}

.box-collapse .child {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
}

.box-fixed {
  width: 100%;
  border: 2px solid #4ecdc4;
  padding: 10px;
  background-color: #e0f7fa;
  overflow: hidden;
}

左侧内容高度变成 0。图里那条细虚线是边框和内边距留下来的：上下边框各 2px，上下内边距各 10px，合在一起大约 24px。浅红背景只铺在这块区域上，所以看起来像一条浅色细带。

红色方块没有消失。浮动只是不参与父元素的高度计算，默认 overflow: visible 仍会把它们画出来，于是方块从这条细带里溢了出去。

右侧 overflow: hidden 让父元素形成 BFC，高度把浮动子元素算进去，青色背景才能包住整行。

这次排查留下的判断

父元素「应该塌却没塌」时，先看它里面还有没有普通流内容，再看它自己是不是已经形成了能包住浮动的格式化上下文。

这次实验里，先后挡住塌陷的就是这两处：

仍在文档流中的文字，加上 .normal-text { clear: both }，父元素为了包住这段文字而获得高度。
外层 display: flex 让演示盒子变成 flex 项，flex 项自己就会包住内部浮动。

把这两处拿掉，左侧只剩浮动子元素，塌陷才出现。右侧的 overflow: hidden 也才重新成为两侧唯一的差别。

复现塌陷时，父元素需要同时满足：不是 flex 项或 grid 项，没有 overflow: hidden、display: flow-root 这类会建立 BFC 的声明，内部也没有 clear 过浮动的普通流元素。少掉其中任何一条，对照实验都会失效。

浮动塌陷复现失败：父元素为什么一直不塌