clear触发重排的条件是：元素为参与文档流的块级元素且位置依赖前序浮动元素布局，此时浏览器需回溯检查浮动兄弟节点以确定清除点，从而引发重排。
clear 触发重排的条件是什么
clear 本身不直接触发重排，但它会让浏览器重新确认“前面浮动是否已结束”，从而迫使布局引擎向上回溯检查浮动兄弟节点——只要该元素参与文档流、且其位置依赖于前面浮动元素的最终布局，重排就会发生。
常见触发场景包括：
- clear: both 元素是普通流块级元素，且紧接在多个浮动子元素之后
- 父容器原本高度由浮动子元素撑开（即未塌陷），但清除后高度变化，导致后续兄弟元素位置调整
- 页面存在大量 float: left + clear: both 的卡片流，每个 clear 都可能拉入前 N 个浮动块参与重排
display: flow-root 和 overflow: hidden 的重排差异
display: flow-root 是专为包裹浮动设计的显示模式，它创建 BFC 并让父容器“感知”浮动子元素高度，但不会裁剪内容、不影响 box-shadow 或 position: fixed 子元素的参照系；而 overflow: hidden 是借溢出控制间接触发 BFC，副作用更不可控。
实操中：
- 若父容器有 transform 或 will-change，overflow: hidden 可能意外创建新层叠上下文，干扰 z-index
- display: flow-root 在 Safari 旧版本或 IE 中不支持，需 fallback
- 两者都会导致父容器高度重算，进而引发后代重排，但 flow-root 的影响范围更确定
为什么 float + clear 布局 resize 时重排更频繁
浮动布局的重排不是局部更新，而是从浮动元素所在行向上回溯到最近块级容器，重排整个子树。窗口缩放时，浏览器必须反复计算所有浮动元素的新位置，尤其当存在高度不一致的浮动项时，clear 会扩大检查范围。
对比现代方案：
- 同等卡片列表在 resize 时，浮动布局平均触发 3–5 次完整重排
- Flex 布局通常只有 1 次，且只重排容器内直接子项
- Grid 布局增量更新粒度更细，底层缓存更充分
clear 应该加在谁身上才有效
clear 必须作用于浮动元素的**后续兄弟元素**，且该元素自身不能浮动。加在浮动元素自己身上（如 float: left; clear: both）完全无效——它已脱离文档流，clear 对它不起作用。
典型错误写法：
- <div class="item" style="float: left; clear: both;"></div>
正确做法：
- 在所有浮动子元素之后插入一个普通流块：<div style="clear: both"></div>
- 或给父容器加 clearfix 类配合 ::after 伪元素
真正容易被忽略的是：clear 不是“归位”，只是“避让”。它不会把前面浮动元素拉下来，也不会改变 HTML 结构顺序——浮动元素的视觉排列始终由它们在 DOM 中的先后顺序决定，CSS 无法靠 float 或 clear 重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
