父容器高度塌陷必须清除浮动——当devtools显示父元素computed height为0px且内容溢出时，表明浮动元素脱离文档流致父容器无法感知其存在；解决路径唯有触发bfc（如display:flow-root）或清除浮动（如clearfix::after）。
不需要主动判断“是否必须”，而是看父容器是否塌陷——塌陷了，就必须清浮动；没塌陷，就不用管。
父容器高度为0就是塌陷的明确信号
当浮动子元素的父容器在开发者工具里显示 height: 0px，但内部有内容，且下方元素向上“顶”进来了（比如背景色消失、边框不包裹内容、后续模块错位），这就是典型塌陷。浏览器渲染时已把浮动元素“踢出文档流”，父容器完全感知不到它们的存在。
- 用 DevTools 检查父元素的 computed height，不是看 style 里写了什么，而是看实际渲染值
- 常见误判：父元素设置了
min-height或padding，看起来有高度，但真实 content height 仍是 0 —— 这种仍属塌陷，会影响background-image渲染、border包裹、margin-bottom传递等 - 如果父容器本身有固定
height或min-height且足够容纳内容，那它不会塌陷，清除浮动纯属多余
现代布局中哪些场景其实根本不用清浮动
只要父容器触发了 BFC（块级格式化上下文）或改用非浮动布局，浮动影响自动隔离，无需额外清除。
-
display: flex或display: grid的父容器，子元素设float已被忽略（规范明确：浮动在 flex/grid 容器中无效） - 父元素设置了
overflow: hidden、overflow: auto、display: flow-root（推荐，语义清晰且无溢出截断副作用） - 父元素是
position: absolute/fixed或contain: layout，也天然形成 BFC - 子元素只在局部小范围浮动（如图文环绕），且父容器高度由其他非浮动内容撑开，也不需要清
clear: both 放错位置等于白写
clear: both 必须作用在浮动元素“之后”的一个**块级元素**上，且该元素需与浮动元素处于同一文档流层级。放错就完全失效。
- 错误：给浮动元素自己加
clear: both—— 浮动后它已脱离流，clear 对自己无效 - 错误：把
clear: both加在浮动元素的父容器上 —— clear 是控制“当前元素周围不能有浮动”，不是让父容器去包住子浮动 - 正确：在最后一个浮动子元素后面插入一个空
<div class="clear"></div>，并设置.clear { clear: both; } - 更稳妥的做法是统一用伪元素法（
.clearfix::after），避免手动插 DOM 节点
真正容易被忽略的是：清除浮动不是目的，让父容器正确参与文档流才是。一旦用了 flex 或 grid 布局，就别再纠结 float 和 clear —— 它们属于同一套已过时的布局逻辑，混用反而增加理解成本和维护风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
