父元素高度塌陷是因浮动元素脱离文档流致父容器无法计算其高度；清除浮动需触发BFC或使用伪元素（如clearfix），而Flex/Grid布局天然避免该问题。
父元素高度塌陷是因为浮动元素脱离了文档流
浮动元素（float: left 或 float: right）会从普通文档流中移出，导致其父容器无法感知子元素的高度，于是计算高度时直接忽略它们——结果就是父元素高度变成 0，背景、边框、内边距等视觉表现全部失效。
用 clear 清除浮动本身不能恢复父元素高度
很多人误以为在父元素末尾加一个 <div style="clear: both"></div> 就能“撑开”父容器，其实这只是在那个空 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；而清除技巧只是补救。真正省心的方式，是让浮动回归它该在的地方——别让它干布局的活。
