text-indent对input无效，因其是替换元素；可靠方案是图标与输入框分离并用float或flex布局。
为什么 float:left + text-indent 不能可靠实现带图标输入框
直接用 float:left 给 <input> 加浮动，再靠 text-indent 挤出图标空间，本质是误用——text-indent 只对块级元素或可编辑的行内块生效，而原生 <input> 是替换元素，text-indent 对它完全无效。你看到的“似乎有效”，往往是巧合（比如父容器有 padding 或伪元素遮挡了光标），实际在不同浏览器、不同 zoom 级别下极易错位或光标偏移。
浮动方案真正能用的结构是「图标+输入框分离」
必须把图标和输入框拆成两个独立元素，再用浮动控制布局。常见错误是试图只给 <input> 浮动，正确做法是让图标（如 <i> 或 <span>）浮动，<input> 跟随其后并设置 overflow:hidden 触发 BFC 防止文字环绕。
<span class="icon"></span><input type="text">.icon { float: left; width: 20px; height: 20px; background: url(icon.svg) no-repeat center; }input { overflow: hidden; padding-left: 28px; /* 图标宽 + 间距 */ }- 务必给
input设定明确的height或line-height，否则浮动图标与输入框基线不对齐
IE8–IE11 下浮动输入框的光标定位异常
老版本 IE 中，如果 <input> 外层没包裹块级容器，且自身被浮动影响，点击输入框边缘时光标可能出现在文字左侧外、甚至不可见。这不是样式问题，是渲染引擎对替换元素浮动后的坐标计算缺陷。
- 修复方式：给
<input>外层加一层<div>并设display: block - 避免对
<input>直接设float，哪怕只是临时调试 - 若必须兼容 IE8，图标建议用背景图 +
padding-left，而非浮动结构
现代项目里更推荐 flex 替代 float
浮动本就不是为表单控件设计的布局机制。用 display: flex 套一层容器，图标用 align-items: center 垂直居中，input 设 flex: 1 自适应宽度，既无清除浮动烦恼，也不存在光标偏移、基线错乱等问题。
立即学习“前端免费学习笔记（深入）”；
.input-with-icon {
display: flex;
align-items: center;
}
.input-with-icon .icon {
margin-right: 8px;
}
.input-with-icon input {
flex: 1;
min-width: 0; /* 防止 flex item 溢出 */
}浮动方案现在只适合极简场景或遗留系统维护；一旦涉及动态宽度、响应式或 focus 状态样式，浮动的脆弱性会立刻暴露。
