overflow:hidden能清除浮动是因为它触发bfc，使父容器包含浮动子元素、防止高度塌陷；同时在侧滑删除场景中，它限制子元素渲染区域，确保按钮不溢出容器边界。
删除按钮为什么必须用 overflow: hidden 包裹父容器
不加 overflow: hidden，向左滑动时删除按钮会直接撑出容器边界，甚至影响页面布局或触发横向滚动条。它不是“让按钮看起来被裁掉”，而是真正限制子元素的渲染区域——这是侧滑动画能干净收口的前提。
常见错误现象：.item 滑动后右侧出现空白缺口、按钮悬在列表外、相邻项被顶开
- 父容器（如
.item）必须设position: relative，否则absolute按钮会相对于 body 定位 -
overflow: hidden要加在.item上，不能只加在ul或body - 若使用
transform: translateX()动画，overflow: hidden仍有效；但部分旧版 Android WebView 需配合will-change: transform防闪烁
position: absolute 的 right 值怎么设才不露馅
删除按钮的 right 初始值不是随便填的负数，它得等于按钮自身宽度（含 padding/border），否则滑动到位后右边留白或遮不住内容。
例如按钮宽 60px，就设 right: -60px；若用了 box-sizing: border-box 且 padding-left 是 12px，那实际要减去的是 60px，不是 48px。
- 推荐用 CSS 变量统一管理：
--delete-width: 60px，然后right: calc(-1 * var(--delete-width)) - 避免用百分比（如
right: -100%），因为父容器宽度变化时按钮会错位 - 如果按钮内有文字或图标，注意
line-height和vertical-align可能导致视觉偏移，建议用flex居中而非line-height
滑动时内容层要不要也用 absolute
不需要。内容区域（如文字、图片）保持 static 或 relative 即可，靠 transform: translateX() 移动它，比改 left 更性能友好，也不会影响文档流。
强行给内容层加 absolute 会导致：文本无法选中、焦点丢失、屏幕阅读器跳过、iOS Safari 中 touch 事件响应变慢。
- 正确做法：内容层不设定位，用 JS 控制其
style.transform = 'translateX(-60px)' - 若需兼容 IE10+，补
-ms-transform，但不要混用left和transform，否则动画会跳变 - 滑动过程中建议加
touch-action: pan-y到内容层，防止误触发页面上下滚动
为什么滑动结束常卡在半路，松手后没回弹
核心是没做“阈值判断 + 回弹逻辑”。仅监听 touchmove 改位置，不处理 touchend 时的位移判定，就会导致交互断在中间。
典型表现：手指一抬，内容停在 -32px，按钮只露出一半；或者轻扫一下就全滑出，根本没法取消。
- 必须在
touchend中计算deltaX = currentX - startX，再和阈值（如 60px）比较 - 若
Math.abs(deltaX) ，就用 <code>transform动画回滚到 0；否则滑到-60px并显示按钮 - 别用
setTimeout模拟回弹，要用transition或requestAnimationFrame，否则在低端机上顿挫明显
侧滑定位看着简单，真正卡住人的从来不是“怎么动”，而是“动完怎么收”——溢出裁剪、定位基准、阈值判定、回弹时机，四个点漏一个，用户滑十次就有七次想砸手机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
