display: flow-root未撑开高度通常因父容器被height/max-height/min-height等显式值锁死，或同时设了position: absolute、float、transform等导致其自身脱离文档流。
父容器用了 display: flow-root 却没撑开高度
这通常不是 flow-root 失效，而是父容器本身被其他样式“锁死”了高度计算逻辑。常见干扰项包括：
-
height、max-height或min-height显式设值——哪怕只写了min-height: 0，也可能压制 BFC 的自动撑高行为；优先移除或改用min-height: auto - 父容器同时设置了
position: absolute或float：它自己也脱离文档流，自然无法再“感知”子元素高度 - 父容器有
transform、filter或will-change：这些会创建新层叠上下文，在某些浏览器（如 Safari 15.6 之前）中会隔离伪元素或 BFC 的包裹效果
clearfix 生效但父容器高度仍异常小
伪元素清除浮动本身没问题，但高度不一致往往来自视觉错觉或样式覆盖：
-
font-size: 0在父容器上，而.clearfix::after没重置字体大小：旧版 Chrome/Safari 中display: table的伪元素可能渲染为高度 0；加一句font-size: medium可修复 -
vertical-align: middle或bottom用在浮动子元素上：会影响伪元素的基线对齐，导致clear: both实际生效位置偏移；统一设为vertical-align: top或直接删掉 - 子元素用了
box-sizing: content-box且带 padding/border：总宽度超 100%，触发换行后右侧块上浮，看起来像“父容器没包住”，其实是布局错位而非高度问题
子元素高度不一致，但父容器高度却“卡在最矮那个”
这是对清除浮动的典型误解：清除浮动（clear 或 BFC）只解决“父容器是否包裹所有浮动子元素”的问题，不负责“拉齐子元素底部”。父容器高度 = 最高浮动子元素的 bottom 边缘到父容器 top 的距离，和最矮那个无关。
- 如果视觉上希望底部对齐，别硬写
height，改用padding-bottom+box-sizing: border-box托高短内容块的文字基线 - 真正需要等高排列，
float本就不适合——直接切到display: flex（配align-items: stretch）或display: grid（配align-items: start） - 响应式断点里容易漏掉：PC 上正常，缩到平板尺寸后媒体查询未重置父容器的 BFC 触发方式，导致塌陷重现
为什么 overflow: hidden 看似撑开了高度，但点击区域还是错位
它确实能触发 BFC 让父容器包裹浮动子元素，但副作用是裁剪溢出内容。最容易被忽略的是：
- 父容器内有
position: absolute的 tooltip、下拉菜单、弹窗，它们被裁掉后不可见，但 DOM 仍在原位——导致鼠标悬停/点击坐标与视觉完全脱节 - Safari 下
backdrop-filter在overflow: hidden容器中可能失效或渲染异常（2026 年 5 月已确认该问题） - 移动端横向滚动区域（比如
white-space: nowrap的长表格）会被强制截断，用户无法滑动查看完整内容
height 和 bounding box 是否匹配；不匹配，说明仍有脱离文档流的样式在起作用——比如某个子元素悄悄加了 position: relative 还带 top 偏移，表面不动，实则破坏了流式计算。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
