clear: both 会拖慢重排，因浏览器需回溯所有浮动元素定位以确定清除点，打断渲染流水线并强制重排；现代推荐用 display: flow-root 创建bfc自动包裹浮动，更轻量安全。
为什么 clear: both 会拖慢重排？
浏览器在遇到 clear 时，必须回溯前面所有浮动元素的位置来判断“清除点”，这个过程会打断渲染流水线，强制触发重排（reflow）。尤其在长列表或动态插入内容的场景下，每个新元素带一个 clear: both，性能损耗是累加的。
- 现代浏览器对浮动本身优化尚可，但
clear是重排“钉子户” -
clear: left或clear: right比clear: both稍好，但依然要回溯 - 用
:after伪元素清除（clearfix）虽避免了额外标签，但伪元素仍参与盒模型计算，不是零成本
用 display: flow-root 替代传统清除
flow-root 创建一个新的块级格式化上下文（BFC），天然包含浮动子元素，无需清除——这是目前最轻量、语义最干净的解法。
- 兼容性：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；IE 完全不支持
- 写法简单：
div.container { display: flow-root; }，容器自动包裹内部浮动 - 比
overflow: hidden更安全：不会意外裁剪position: absolute子元素或阴影 - 注意：它会重置
margin-collapse，相邻块级元素外边距不再合并
哪些场景还不得不写 clear？
当需要精确控制某一行的起始位置（比如图文混排中文字绕图后另起一行），或者兼容老版本浏览器（IE11 及以下）时，clear 仍是唯一选择。
- 优先用
clear: left或clear: right，而非无脑clear: both - 避免在循环生成的 item 上重复写
clear，改用父容器flow-root或overflow: hidden - 如果必须用 clearfix，别手写
:after，直接引入postcss-clearfix这类工具自动注入，减少维护负担
浮动本身是否还值得用？
纯布局场景下，浮动已基本被 flex 和 grid 取代。但仍有两个不可替代的用途：文字环绕图片（float: left/right on <img>），以及某些遗留系统中无法重构的侧边栏结构。
- 文字环绕必须用
float，shape-outside兼容性差且复杂度高 - 若只是实现“左栏固定、右栏自适应”，用
display: flex更稳，且无需清除 - 浮动元素脱离文档流，可能影响父容器高度——这才是真正该优先解决的问题，而不是堆清除代码
浮动不是洪水猛兽，但为它写一堆 clear 就是给自己埋性能债。能用 flow-root 就别碰 clear，能不用浮动就别用——尤其是当你的 CSS 文件里还藏着 IE8 hack 的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
