浮动元素设 pointer-events: none 后点击能穿透到底层；但若其自身或任意祖先设了该属性，则整棵子树被跳过命中测试，子元素设 auto 也无效。
浮动元素设了 pointer-events: none 还是点不中底层？
不能。只要父级（含 float 元素自身或其任意祖先）设置了 pointer-events: none，事件就彻底跳过整棵子树，子元素写 pointer-events: auto 也无效。这不是“穿透没生效”，而是浏览器根本不在命中测试（hit-testing）阶段考虑它——float 属性本身不影响事件流，但一旦和 pointer-events: none 混用，问题就出在层级归属上。
float 元素要不要加 pointer-events: none？看它是否遮挡交互
如果一个 float 元素只是视觉装饰（比如飘在文字右上角的图标、带阴影的悬浮标签），又盖住了下方可点击区域，那就直接给它加 pointer-events: none。它仍保持浮动定位、不影响布局，但点击会落到下面的文字链接或按钮上。
- 必须确保该元素没有监听自己的
click或mouseenter - 若它内部有子元素需要响应点击（如关闭按钮），别把它整个设为
none，而是把按钮移出浮动容器，或用绝对定位 +z-index调整层叠关系 -
float不改变pointer-events的继承逻辑：它默认继承自父级，不是独立事件上下文
为什么 z-index 拉高了还是点不中？
因为 z-index 只控制层叠顺序，不控制事件捕获。一个 z-index: 999 的 float 元素，只要没设 pointer-events: none，它就会拦截所有落在它区域内的点击，不管底下元素 z-index 多低。反过来，即使它 z-index: -1，只要没被其他元素挡住且设了 pointer-events: auto，它依然能响应。
- 事件是否触发，只取决于命中测试时该元素是否参与（由
pointer-events决定），和它在层叠上下文中的位置无关 - 调试时可用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，确认点击区域是否真被该浮动元素覆盖
- 不要依赖
opacity: 0或visibility: hidden来“隐形点击”，它们要么保留事件响应，要么破坏可访问性
React 中给浮动组件加 pointer-events: none 的实际写法
直接写 style={{ pointerEvents: 'none' }} 没问题，但要注意合成事件冒泡不受影响：如果浮动组件的父容器绑了 onClick，而你点了浮动区域（此时它已 none），事件仍会冒泡到父容器并触发。
- 避免在浮动组件外层再包一层无意义的
div并监听点击，容易误触 - 若需精确控制，建议用
event.stopPropagation()在子按钮上显式阻止，而不是靠pointer-events模糊处理 - 服务端渲染（SSR）下，
pointer-events是纯 CSS 行为，无需额外 hydrate 处理
none 就万事大吉”，却忽略了它所在的 DOM 位置、祖先节点的状态，以及事件冒泡路径上的其他监听器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
