浮动元素在ios safari点不到，根本原因是其默认层叠等级低且父容器创建新层叠上下文将其压底，需显式设cursor: pointer触发webkit触摸事件分发，并确保元素有真实尺寸、正确dom结构及精准的pointer-events控制。
为什么浮动元素在iOS Safari里点不到
根本不是float本身的问题，而是它默认属于层叠等级5，而很多父容器（比如加了transform、overflow: hidden或position: relative没配z-index）会创建新层叠上下文，把浮动元素“压”在下面。iOS WebKit对hit-testing更严格——如果元素没被判定为“可交互区域”，连touchstart都不会派发，更别说click。
必须加cursor: pointer才能触发事件
iOS Safari只对显式声明交互意图的元素分发触摸事件。cursor: pointer不是为了显示手型（移动端不渲染光标），而是向WebKit发信号：“这个区域要响应触摸”。没有它，哪怕绑了addEventListener('click', ...)也收不到事件。
- 仅对
display: block或inline-block元素生效，float元素需先设display: block - 元素必须有真实尺寸：
width/height不能为0，也不能被overflow: hidden裁出视口 - 伪元素（如
::before图标）必须有display: block+ 明确宽高，否则热区面积为0
pointer-events: none设错位置会导致整棵子树失活
常见错误是给浮动容器设pointer-events: none，再指望里面的按钮用pointer-events: auto自救——这完全无效。浏览器事件捕获自顶向下，父级为none就跳过整棵子树，子元素写什么都白搭。
- 真需要按钮可点，就把按钮移出浮动容器DOM树（例如用Portal挂到
下） - 若必须保留在内部，只对非按钮区域设
pointer-events: none，按钮所在区域用额外容器隔离 - 别用
position: absolute把按钮“视觉上”浮出来——DOM结构里它还是被父级拦截
动画过渡期的pointer-events必须精准控制
用opacity做淡入淡出时，不能只在起始和结束状态设pointer-events: none。过渡中间帧若仍为auto，用户可能点中半透明状态下的元素；若全程none，又点不到刚出现的按钮。
- 动画开始前用JS设
pointer-events: none，animationend回调里恢复auto - 在
@keyframes的0%和100%关键帧里显式写pointer-events: auto，防CSS优先级覆盖 - 避免和
visibility: hidden混用——它不影响事件流，纯属多此一举
float本身调，得用DevTools的Rendering面板勾选Show layer borders，看它到底被谁盖住了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
