display: flow-root是现代最优解，一行代码创建bfc包裹浮动子项、无裁剪无副作用；clear: both加在父元素上无效，因它只控制自身定位，不参与父容器高度计算，根本原因是浮动子元素脱离文档流致父容器“看不见”它们。
直接用 display: flow-root，一行解决，无副作用，现代浏览器全支持。其他方案要么有裁剪风险，要么写错一个属性就失效。
为什么 clear: both 单独加在父元素上没用
因为 clear 只控制「自身」不与前面的浮动元素同行，它不参与父容器的高度计算。父容器塌陷的根本原因是浮动子元素脱离文档流，父容器根本“看不见”它们——不是清得不够，而是没东西可清。
-
clear: both写在父元素上：父元素自己没浮动，这个声明完全无效 -
clear: both写在浮动子元素上：只能让该子元素换行，无法修复父容器高度归零 - 真正起效的是在父容器末尾插入一个「参与文档流的块级占位」，再让它
clear: both
display: flow-root 是什么，为什么推荐它
它是 CSS 专为解决浮动塌陷设计的值，强制创建 BFC（块级格式化上下文），让父容器重新包含所有浮动子元素，同时不改变溢出行为、不裁剪 position: absolute 弹层、阴影或 transform 动画。
- 必须作用在「直接包裹浮动子元素」的父容器上，写在祖父层或子元素上都无效
- 现代浏览器已全面支持：
Chrome 64+、Firefox 58+、Safari 15.4+、iOS 15.4+ - 兼容性兜底可用
@supports回退：parent { display: flow-root; }@supports not (display: flow-root) { parent { overflow: hidden; } } - 如果父容器本身是
inline元素（如span），需先设display: block或inline-block，否则flow-root不生效
.clearfix::after 写不对就等于没写
很多人复制了伪元素代码却无效，往往是因为漏掉关键项。标准写法必须同时满足：
-
content: ""：缺失则伪元素不渲染，彻底失效 -
display: table：比block更稳妥，避免 IE8 下 margin 合并异常，也兼容旧版 UC 浏览器 -
clear: both：核心动作，仅靠前两项不能解决问题 -
height: 0：移动端部分老内核（如旧版 QQ 浏览器）需要显式设为 0，否则可能误算高度
另外注意：Chrome DevTools 默认不显示 ::after，要手动勾选 “Show user agent shadow DOM” 才能看到是否渲染成功；父容器若写了 height 或 min-height，会覆盖 clearfix 带来的高度计算。
真正麻烦的从来不是写不对，而是加错了层级——嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 clearfix 或 flow-root；更常见的是，在 display: flex 容器里徒劳地塞 ::after，那个伪元素根本不会参与布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
