必须给输入框包裹层加position: relative，否则清空图标会相对于最近定位祖先错位；right设为8px并配合top: 50% + transform: translateY(-50%)可确保垂直居中且不遮文字；清空后需调用focus()保持焦点并阻止事件冒泡。
input右侧加清空按钮为什么不能只靠position: absolute？
因为input本身没有定位上下文，直接对图标设position: absolute会相对于最近的position: relative/absolute/fixed祖先定位——如果父容器没设position: relative，图标就可能飞到页面顶部或左侧边界。
必须给输入框的包裹层（比如<div class="input-wrapper">）加上position: relative，否则绝对定位失效或错位。
- 常见错误现象：
clear icon贴在页面左上角、或随滚动偏移 - 正确做法：包裹层
display: inline-block或display: block+position: relative - 别用
position: static（默认值）的父元素做定位参考
清空图标的right和top怎么取值才不遮挡文字？
不能写死right: 0——那样图标会紧贴右边缘，和输入框内边距冲突；也不能依赖top: 50%再transform: translateY(-50%)，因为input行高、字体大小、padding变化时容易偏移。
最稳的方式是让图标垂直居中对齐input的border-box，同时留出可点击空间：
立即学习“前端免费学习笔记（深入）”；
-
right: 8px（比padding-right略大，避免文字顶到图标） -
top: 50%+transform: translateY(-50%)是可行的，但前提是input高度固定或由line-height主导 - 如果
input用了box-sizing: border-box且height明确，也可用top: calc(50% - 6px)（假设图标高12px） - 移动端要注意
touch-action: manipulation和最小点击区域44×44px
清空按钮点击后如何安全清空input.value又不干扰焦点？
直接input.value = ''没问题，但用户常忽略两点：一是清空后光标消失，二是回车/失焦行为被意外中断。
关键不是“能不能清”，而是“清完还像没动过一样”：
- 清空后调用
input.focus()保持焦点，避免键盘收起（移动端尤其重要） - 绑定
click事件时用event.stopPropagation()，防止冒泡触发父层click导致意外跳转或折叠 - 别在
input上监听input事件来同步控制图标显隐——应该用input.addEventListener('input', ...)，而不是oninput内联写法，避免重复绑定 - 图标显示逻辑建议用
input.value.length > 0判断，不用input.value !== ''（更直观，兼容空格等边界）
IE11下::after伪元素做清空图标为什么点不动？
IE11不支持对input元素使用::before/::after伪元素（渲染出来但无法响应事件），这是硬限制，不是样式问题。
想兼容IE11，必须用真实DOM节点（比如<button type="button" class="clear-btn">），再配合pointer-events: none和pointer-events: auto做穿透控制：
- 包裹层设
pointer-events: none，图标按钮设pointer-events: auto - 图标按钮
background: none、border: none、font-size: 0（防文字撑开） - 不要用
label包裹input再塞图标——for属性在动态清空场景下容易混乱 - 现代项目若已放弃IE11，可用
contenteditable+div模拟输入框，但成本高，不推荐
伪类+定位这条路，核心就三件事：包裹层定上下文、图标留白不压字、清空后焦点不丢。其余都是适配细节，改一点就偏了。
