浮动元素脱离文档流导致父容器高度塌陷，修复方式有三：bfc触发（如display: flow-root）、伪元素清除（clearfix）、改用flex/grid布局。
浮动元素导致父容器高度塌陷的典型表现
父元素在子元素全部浮动后，height 变成 0 或远小于视觉预期，内部背景、边框、阴影消失，后续兄弟元素向上“顶上来”——这不是 bug，是 CSS 浮动的原始行为：浮动元素脱离文档流，父容器无法感知其尺寸。
用 clear 解决后续元素错位，但不修复父容器高度
clear 仅控制**自身**不与浮动元素同侧排列，常用于浮动列表后的“清空”段落或按钮。它对父容器高度无影响：
<div class="list"> <div class="item">A</div> <div class="item">B</div> </div> <p style="clear: both">这段不会和上面浮动项重叠</p>
-
clear: both必须加在**浮动元素之后的兄弟元素**上，不是父容器上 - 加在父容器上（如
style="clear: both"）完全无效，因为父容器没参与浮动上下文 - 纯靠
clear无法让父容器包裹住浮动子项
真正修复父容器高度的三种可靠方式
目标是让父容器重新“感知”浮动子项的高度。现代项目优先选前两种：
-
BFC 触发（推荐）：给父容器设置
overflow: hidden、overflow: auto或display: flow-root。display: flow-root最干净，无溢出副作用，IE 不支持；overflow兼容性好，但可能意外截断阴影或下拉菜单 -
::after 伪元素清除（兼容兜底）：在父容器上添加
clearfix类，用::after插入一个clear: both的块级内容：.clearfix::after { content: ""; display: table; clear: both; }该方法不改变布局模型，兼容所有浏览器，但需额外类名 -
flex 或 grid 布局替代浮动（长期建议）：把父容器设为
display: flex或display: grid，子元素自动参与布局计算，根本无需clear或 BFC ——但需确认旧版浏览器是否可接受
为什么 float: left + width: 100% 还会塌陷？
常见误解：以为宽设满就能撑开父容器。实际只要元素仍处于浮动状态，就仍脱离文档流。哪怕它视觉上占满整行，父容器依然“看不见”它。
立即学习“前端免费学习笔记（深入）”；
- 浮动的本质是脱离文档流，和宽度、高度值无关
-
width: 100%是相对于父容器内容区计算的，而父容器此时高度为0，所以子项的100%高度也失去参照 - 必须通过 BFC、伪元素或布局模式切换来重建父容器的包含块行为
最易被忽略的是：在响应式场景中，overflow: hidden 可能剪掉移动端弹出层，而 display: flow-root 在 Safari 旧版本有渲染异常——这种细节往往要到真机测试才暴露。
