clear: both 不清除浮动，只让元素避开浮动；解决父容器塌陷需触发bfc或插入参与高度计算的块级节点。
直接说结论：clear: both 本身不“清除浮动”，它只控制单个元素避开浮动；真正要解决父容器高度塌陷，得让父容器自己“感知”浮动子项——靠触发 BFC 或插入真实参与高度计算的块级节点。
为什么加了 clear: both 的空 div 还是没用
常见错误是把 clear: both 加在浮动元素自己身上，或者加在父容器上，这两者都无效。它必须作用于一个「紧跟在浮动元素之后、且是块级」的兄弟元素上。
-
.float-box { clear: both; }—— 浮动元素自己设clear，只影响它和前面浮动的关系，对父容器高度毫无帮助 -
.parent { clear: both; }—— 父容器没浮动，clear属性根本不生效（默认是 inline 元素） - 空
div被设了display: none、height: 0或visibility: hidden—— 它虽然存在，但不参与文档流高度计算，撑不开父容器
::after 伪元素清除法失效的隐蔽原因
看起来复制粘贴了标准写法，但页面还是塌陷，大概率是这几个细节没对上：
-
content: ""缺失或写成content: " "（带空格）—— 前者不生成伪元素，后者可能因行高导致意外高度 -
display写成block而非table—— 在 IE8/9 或某些 margin 折叠场景下，block可能被合并掉，table更稳定 - 父容器本身有
transform、filter或will-change—— 这些会创建新层叠上下文，隔离clear行为 - 用在 CSS-in-JS 或 Shadow DOM 中 —— 伪元素选择器默认不穿透作用域，需显式写
:host::after
用 overflow: hidden 替代时容易踩的坑
它确实能触发 BFC，让父容器包住浮动子项，但副作用很实在：
- 会裁剪所有溢出内容：比如
position: absolute的下拉菜单、box-shadow、transform位移后的部分，全都看不见 - 如果父容器内容真超出了宽高，
overflow: hidden会静默截断，而overflow: auto可能意外弹出滚动条 - 和
clear: both混用是冗余的——BFC 已触发，clear不再起作用，还可能干扰absolute子元素定位
现代项目里最该放弃的思维惯性
不是“怎么清浮动”，而是“为什么还在用 float 做布局”。
- 一旦父容器设了
display: flex或display: grid，子元素的float就失去布局效力（仅剩文本环绕等边缘行为） - 混用
float和flex是典型陷阱：比如给 flex 项目加float: right，结果它脱离 flex 排列，覆盖其他内容 -
display: flow-root是语义最干净的替代方案，一行代码触发 BFC，无副作用，Chrome 64+ / Firefox 59+ / Safari 15.4+ 全支持
真正麻烦的从来不是写法，而是没意识到：浮动本就不该承担主布局职责。它现在唯一的正当用途，是让一张图左浮、文字绕排——仅此而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
