.clearfix必须加在直接包裹浮动子项的父容器上，且::after伪元素需设content:""和display:table才能生效；现代项目推荐改用flex/grid布局替代浮动。
直接给父容器加 .clearfix 类就能修复，但“一劳永逸”不在于写一次类名，而在于写对、用对、不滥用——错一个属性、加错一层、或在现代布局里硬套，都会失效。
为什么 .clearfix::after 必须写 content: ""
伪元素不渲染就等于没插入那个“撑高”的占位块，clear: both 完全没作用对象。浏览器只在 content 非空时才创建伪元素（哪怕只是 content: ""），这是 CSS 规范强制要求。
-
content: none或漏写content→ 伪元素不生成 → 清除无效 -
content: " "（空格）→ 可能触发换行或额外行高，干扰布局 - 必须是
content: ""，且不能被其他规则覆盖（比如被重置为content: normal）
display: table 比 display: block 更稳的真相
单纯设 display: block 在部分老浏览器（尤其是 IE8/9）中无法可靠触发 BFC，也无法撑开父容器高度；display: table 能隐式创建 BFC，同时避免 margin 合并问题，兼容性更扎实。
-
display: table→ 触发 BFC + 无 margin 合并 + IE8+ 全支持 -
display: block→ 现代浏览器 OK，但 IE8 下可能失效 - 别写
display: inline或display: inline-block→clear对它们无效
clearfix 必须加在「直接包裹浮动子项」的父容器上
嵌套浮动时，外层加了 .clearfix，内层没加，照样塌陷——BFC 不传递，每一层脱离文档流的容器都得自己“醒过来”。
立即学习“前端免费学习笔记（深入）”；
- 错误：只给
.list加.clearfix，但.item-group内部也有浮动子项 →.item-group高度为 0，.list清除的只是个空盒子 - 正确：检查 DOM 中所有设置了
float的容器，只要它内部有浮动子项，就单独加.clearfix - 调试技巧：在 DevTools 中看 computed height，若某层是
0px，就说明它缺 clearfix
现代项目里，.clearfix 已不是首选方案
如果你的项目不需要支持 IE11 或 Safari display: flow-root 是更干净、零副作用的替代——它专为此设计，不依赖伪元素，也不污染语义。
-
display: flow-root→ 一行代码，无额外节点，无兼容陷阱，Chrome 64+/Firefox 58+/Safari 15.4+ 均支持 - IE 完全不识别该值，会退化为
display: block→ 此时仍塌陷，必须回退到伪元素法 - 别在 flex/grid 容器里强行加 clearfix →
float在这类容器中被忽略，清除逻辑多余
真正容易被忽略的，是开发者工具默认不显示 ::after，你改了十遍 CSS 却没确认伪元素是否真的渲染出来——勾选 “Show user agent shadow DOM” 才能看到它有没有生效。
