清除浮动是被动修复而非布局方案，display: flow-root 是标准替代；flex/grid 天然不塌陷，无需清除；仅老项目、图文混排或极旧兼容场景才需 clearfix。
清除浮动是补丁，不是解决方案
清除浮动（比如 .clearfix::after）从来就不是布局的正统手段，而是对 float 脱离文档流这一副作用的被动修复。它不解决“为什么父容器塌陷”，只掩盖结果——就像给漏气的轮胎打补丁，而不是换新胎。
常见错误现象包括：overflow: hidden 意外裁剪 position: absolute 的下拉菜单；::after 伪元素在 height 或 max-height 父容器里触发滚动条；display: block 替代 display: table 导致清除失效（因为没创建 BFC）。
-
display: flow-root是标准替代：一行代码开启新块级格式化上下文，无裁剪、无伪元素、兼容性已覆盖 Chrome 64+/Firefox 58+/Safari 12.1+ - 若需支持 IE11，用
.clearfix::after仍可，但必须带content: ""和display: table，block不行 - 别在 Flex/Grid 容器里写
clear或clearfix——它们根本不会生效，且可能干扰渲染逻辑
Flexbox 和 Grid 天然不塌陷，无需清除
当你把 display: flex 或 display: grid 加到父容器上，子项自动参与高度计算，父容器高度自然包裹内容。这不是“优化”，而是模型设计使然：Flex/Grid 的子项默认不脱离文档流，float 的所有副作用在这里不存在。
容易踩的坑是混用：比如父容器设了 display: flex，子项却还留着 float: left。浏览器会忽略 float，但开发者可能误以为它还在起作用，导致对齐错乱、换行异常，尤其嵌套时 bug 难定位。
- Flex 容器中，
flex-wrap: wrap控制是否换行，不需要靠float“挤”出空间 - Grid 容器中，
float和clear被规范明确忽略，写了等于没写 - 响应式切换时，别在媒体查询里反复切
float: none+clear: both，直接改flex-direction或grid-template-columns
什么场景下仍要写 clearfix？
不是“能不能”，而是“该不该”。目前仍需 clearfix 的场景非常有限，且基本与现代布局无关：
- 维护老项目：HTML 结构不可改，只能靠 CSS 修复塌陷，此时
::after清除最稳妥 - 图文混排：CMS 输出的正文图片带
float: left，文字环绕是语义所需，清除只是为了不让父段落塌陷 - 极旧环境兼容：IE8 及更早版本，
display: flex不可用，clearfix是唯一选择
注意：这些都不是“主动选 float 做布局”，而是在历史约束下做最小干预。
display: flow-root 比 clearfix 更干净
display: flow-root 是 W3C 标准定义的 BFC 触发方式，它比 clearfix 更轻量、更语义化，且无副作用。它不添加伪元素、不依赖 content、不干扰定位流。
性能上几乎无差异，但可维护性高得多：你不用记住“为什么这里要加 ::after”，只需理解“这个容器需要包含浮动子项”。
- 不能用于需要
position: relative或transform的容器（会创建新层叠上下文，影响 z-index 层级） - Safari 12.1 之前不支持，但 2026 年绝大多数生产环境已可放心使用
- 和
flex/grid不冲突，可以共存，但没必要——既然都用了 Flex/Grid，就别再让子项 float
真正容易被忽略的点是：清除浮动这件事本身，就是你还在用过时模型的信号。只要代码里出现 clear 或 clearfix，就该停下来问一句——是不是该换布局方案了？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
