display: flow-root 是修复脱离文档流导致父容器塌陷等问题的最直接方式，它创建 BFC 包含脱离流子元素且无副作用，兼容主流浏览器，2026年可放心使用。
脱离文档流本身不是错误，但会导致父容器高度塌陷、后续元素上移、点击区域错位——问题不在“脱离”，而在“父容器没感知到子元素还占着空间”。
display: flow-root 是最直接的修复方式
它专为解决这类问题设计：让父容器创建 BFC（块级格式化上下文），自然包含所有浮动、绝对定位等脱离流的子元素，且无副作用。
-
display: flow-root不影响子元素定位逻辑，也不裁剪box-shadow、transform位移内容或下拉菜单 - 兼容性已覆盖 Chrome 58+ / Firefox 57+ / Safari 10.1+ / Edge 79+，2026 年绝大多数项目可放心用
- 别写成
display: inline-flow-root或拼错 —— 浏览器会直接忽略该声明 - 如果父容器同时用了
flex或grid，flow-root会被覆盖，此时无需额外加
clear: both 失效时先查这三件事
clear: both 只对“前一个浮动兄弟元素”起作用，不是全局清空。失效往往是因为它根本没生效。
- 目标元素自己不能设
float，否则它也脱离流，clear就失去意义 - 它必须和浮动元素同属一个父容器、同一层 DOM 树；中间插了
display: flex容器，clear就断联了 - 检查
Computed面板里clear的值是否被all: unset、revert或重置样式覆盖
position: absolute/fixed 导致父容器塌陷怎么办
这类元素默认不参与父容器高度计算，但你通常并不想让它“消失”在布局中。
立即学习“前端免费学习笔记（深入）”；
- 如果只是微调位置，优先改用
position: relative+top/left，或transform: translateY()—— 它们不脱离流 - 若必须用
absolute且父容器需撑开，手动加min-height（比如根据子元素预估）比硬设height更安全 - 避免给父容器也设
position: absolute—— 多层脱离流会让整个布局链断裂，调试时极难追踪 - 临时验证：给父容器加
outline: 1px solid red，看是否真的缩成一条线
transform 后点击区域错位不是 bug，是预期行为
transform 只改变视觉呈现，不改变元素在文档流中的原始占位和交互热区。旋转、缩放后点不上，是因为浏览器仍按原尺寸响应事件。
-
transform: scale(1.5)后，元素视觉变大，但offsetWidth还是原来值，JS 布局计算容易出错 - 旋转后的点击区域仍匹配原始矩形框，不是视觉轮廓 —— 想支持形状点击，得用
clip-path或 SVG - 如果子元素用了
position: absolute，它的定位参考会变成这个transform元素（新包含块），不是原本的父容器 - 不要靠叠加多个
transform修复错位，先确认是否真需要transform，还是用margin、padding或布局模型更合适
最容易被忽略的是：媒体查询里换布局方式（比如 PC 用 float，平板切 flex），但忘了同步更新父容器的 BFC 触发方式 —— 一缩屏，塌陷就突然出现。
