17370845950

父元素高度塌陷是因浮动元素脱离文档流致父容器无法计算其高度；清除浮动需触发BFC或使用伪元素（如clearfix），而Flex/Grid布局天然避免该问题。

父元素高度塌陷是因为浮动元素脱离了文档流

浮动元素（float: left 或 float: right）会从普通文档流中移出，导致其父容器无法感知子元素的高度，于是计算高度时直接忽略它们——结果就是父元素高度变成 0，背景、边框、内边距等视觉表现全部失效。

用 clear 清除浮动本身不能恢复父元素高度

很多人误以为在父元素末尾加一个 就能“撑开”父容器，其实这只是在那个空 div 处阻止了后续浮动，它自身没有内容、没有高度，对父容器的 height 计算毫无帮助。真正起作用的是：这个清除元素必须参与父容器的高度计算——所以它得有「触发块格式化上下文（BFC）」或「具备实际尺寸」。

• clear 只影响定位行为，不改变父容器的布局上下文
• 单纯加 clear 的空标签若没有 height、padding 或 border，仍不会撑高父元素
• 如果用了 clear 但父元素还是塌陷，大概率是清除元素没被正确渲染（比如 display: none 或 visibility: hidden）

真正有效的清除方案：触发 BFC 或使用伪元素

现代实践中，推荐以下两种稳定、无额外 DOM 的方式：

• 给父元素设置 overflow: hidden（或 auto、scroll），强制触发 BFC —— 简单直接，但注意可能意外裁剪溢出内容或触发滚动条
• 用 ::after 伪元素清除浮动，更安全且语义清晰

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* 或更通用写法（兼容 IE8+） */
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

然后给浮动容器添加 class="clearfix" 即可。关键是：display: block + clear: both 让伪元素成为普通流中的块级元素，它会占据空间（哪怕 height: 0，只要不是 display: none），从而把父容器高度“拉下来”。

Flex/Grid 布局下根本不需要清除浮动

如果你还在为浮动清除问题花时间，先确认是否真需要浮动——display: flex 或 display: grid 已完全取代浮动做布局。它们天然不脱离文档流，父容器高度自动包含子项，不存在塌陷问题。

• 浮动仅适合文字环绕、老式多栏排版等少数场景
• 用 float 实现导航栏或卡片布局，不如改用 flex + justify-content
• 一旦用了 flex 或 grid，clear、clearfix 全部失效且无意义

浮动塌陷的本质是布局模型的副作用，不是 bug；而清除技巧只是补救。真正省心的方式，是让浮动回归它该在的地方——别让它干布局的活。