父元素:hover不触发的根本原因是高度塌陷为0，导致无渲染区域；修复需让父容器重新感知高度，推荐display: flow-root（无裁剪副作用），次选overflow: hidden（会裁剪溢出内容），兼容旧版可用clearfix。
父元素无法触发 :hover，往往不是 hover 本身坏了，而是父元素高度塌陷成 0 —— 它“看不见”浮动子元素，自然没尺寸可悬停。修复的关键是让父容器重新感知高度，而不是给它硬加 height 或瞎试 clear。
父元素高度为 0 时 :hover 根本不会触发
这是最常被忽略的底层事实：:hover 作用于一个元素的前提是它有可交互的渲染区域。如果父元素因浮动塌陷导致 offsetHeight === 0，鼠标划过那片区域实际是在“悬停父元素的边框外”，:hover 规则压根不进入匹配流程。
- 典型现象：父容器设了
background-color和:hover { background: red; }，但鼠标移上去毫无反应；用 DevTools 检查发现该元素在 Elements 面板里“高亮不到”，或 Layout 标签页显示 height=0 - 别浪费时间检查选择器优先级或拼写——先确认父元素有没有真实高度
- 浮动子元素本身 hover 是正常的，问题只出在父级“不存在”
overflow: hidden 能恢复 hover，但会悄悄裁剪内容
给父元素加 overflow: hidden 是最快验证方案，它强制创建 BFC，让父容器重新包含浮动子项、获得正确高度，:hover 立刻可用。
- 有效前提是：父元素不能有
height、max-height或position: absolute等限制高度的声明，否则 BFC 也撑不开 - 风险点：任何超出父边界的内容（下拉菜单、tooltip、
transform移出的动画、position: absolute子元素）都会被切掉，且无提示 - IE6/7 下可能引发 hasLayout 异常，表现不稳定
- 这不是“清除浮动”，只是副作用利用，后期维护者容易误删
display: flow-root 是现代首选，无裁剪副作用
display: flow-root 是 CSS 专门为此设计的值，语义清晰、行为确定：创建 BFC 且不影响溢出表现。
- 一行解决：
.parent { display: flow-root; }，无需伪元素、无额外 DOM、不干扰子元素定位 - 兼容性：Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+；如需支持 IE11，此方案不可用
- 与
overflow: hidden的关键区别：它不改变溢出策略，position: absolute子元素越界、动画位移、弹层展开全都不受影响 - 注意：若父元素已设
display: flex或display: grid，再加flow-root无效（display 值互斥）
clearfix 仍可用，但必须写对关键细节
在需兼容 IE8–9 或老项目中，clearfix 仍是可靠方案，但失效往往源于几个硬伤。
- 伪元素必须渲染：
content: ""缺一不可，写成content: none或被!important覆盖都会静默失败 - 清除必须生效：
clear: both要作用在块级元素上，display: table比display: block在 IE7 下更稳，但若父元素有transform或filter，可能干扰层叠上下文导致清除失效 - 别把
clear: both错加到父元素自身：.parent { clear: both; }完全无效，它只影响兄弟元素的定位 - 混合布局要小心：父元素用了
clearfix，但某个子元素又用了position: absolute，此时高度计算又会出意外——浮动清除了，绝对定位又脱离了，得单独处理
真正麻烦的不是选哪个方案，而是混用场景：比如父容器加了 flow-root，但子元素用了 float + shape-outside 做文字环绕，这时高度虽正常，但排版意图可能已被 Flex/Grid 的自动对齐覆盖。修复前，先问一句：这里真需要 float 吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
