display: flow-root 是清除浮动的终点方案，专为解决父容器高度塌陷而设计，语义明确、无副作用、不依赖伪元素或 hack；Chrome 64+ 等现代浏览器全面支持，IE 不支持但已基本淘汰。
不需要主动清除浮动——只要你不主动用 float 做布局，就根本不存在“清不清”的问题。
display: flow-root 是清除浮动的终点方案，不是过渡手段
它专为解决浮动导致的父容器高度塌陷而设计，语义明确、无副作用、不依赖伪元素或 hack。只要父容器设了 display: flow-root，内部所有 float: left 或 float: right 子项都会被自然包含，高度计算准确。
- Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 均已稳定支持；IE 完全不支持，但 2026 年绝大多数项目已放弃 IE
- 它不会像
overflow: hidden那样裁剪position: absolute的弹出层或 tooltip - 不要和
display: flex或display: grid混用：一旦父容器已是 flex/grid，float会被浏览器静默忽略，flow-root也无效
伪元素 clearfix 还得会，但只用于兜底场景
当你无法控制 HTML 结构（比如 CMS 富文本输出的图片）、或必须兼容旧版 Android WebView / Safari 14 及更早版本时，.clearfix::after 仍是唯一可靠 fallback。
- 标准写法必须含三要素：
content: ""（空值也不可省）、display: table（比block更稳）、clear: both - 别写
*zoom: 1：IE6/7 已无实际维护价值，反而干扰现代解析器 - 如果父容器已设
overflow: hidden，再加.clearfix无效——BFC 已提前建立，伪元素清无可清
clear: both 加在浮动元素自己身上毫无意义
clear 属性只对「非浮动的后续兄弟块级元素」生效，它不是作用于父容器的“修复开关”，也不是浮动元素自身的样式开关。
- 错误写法：
.item { float: left; clear: both; }—— 每个子项都加，等于没清 - 正确逻辑：浮动流末尾插入一个非浮动块级元素，并设
clear: both，或用伪元素模拟这个位置 - 现代框架（React/Vue）中，
style={{ float: 'left' }}在 concurrent rendering 下可能被跳过；CSS-in-JS 方案（如 Emotion）默认 lint 禁用float
真正容易被忽略的点是：清除浮动从来不是目标，而是信号——它说明你正在用一种已被替代的模型处理布局。当 flow-root 或 flex 不能直接解决问题时，该检查的不是清除方式对不对，而是为什么还在让 float 出现在主布局里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
