浮动元素下text-indent失效的根本原因是其脱离文档流导致首行盒计算基准丢失，CSS规范明确忽略该属性；应改用::before伪元素占位模拟缩进，或升级为flow-root/flex布局。
浮动元素下 text-indent 失效的根本原因
直接给浮动元素（如 float: left）设置 text-indent 通常没效果，因为浮动会脱离常规文档流，导致首行缩进的计算基准丢失——text-indent 只对块级框的「第一行盒」起作用，而浮动元素的行框生成逻辑被重置了。
这不是浏览器 bug，是 CSS 规范中明确的行为：浮动元素的 text-indent 被忽略（见 CSS2.1 §10.3.5）。所以别白费劲调 text-indent，得换思路。
用 ::first-line 伪元素 + margin-left 模拟缩进
真正可行的做法是绕过 text-indent，改用伪元素在首行开头插入占位内容，再通过外边距控制位置。但注意：::first-line 本身不能设 display 或尺寸，所以更可靠的是用 ::before 配合 content 和 inline 行为。
-
::before必须设content: ""，否则不渲染 - 推荐设
display: inline-block; width: 2em;（或具体像素值），避免影响后续文字换行 - 不要用
margin-left直接推文字——它会把整行都推偏；而是让伪元素「占位」，文字自然跟在后面 - 若父容器有
line-height，伪元素需同步设置相同值，防止基线错位
.float-text::before {
content: "";
display: inline-block;
width: 2em;
height: 1em;
line-height: 1;
vertical-align: baseline;
}
兼容性与浮动上下文的坑
这个方案在 IE8+、Chrome、Firefox、Safari 均有效，但要注意两个易错点：
- 如果浮动元素本身没有明确的
width，::before的inline-block宽度可能被压缩（尤其在窄容器中），建议始终给浮动元素设固定或最小宽度 - 当浮动元素后紧跟清除浮动的元素（如
clear: both），伪元素占位可能被误判为「内容高度」，导致清除失效——此时应把伪元素加在浮动元素内部文本的最前面，而非整个浮动容器上 - 若文本含中文混排，
2em在不同字体下实际宽度浮动较大，可改用ch单位（如2ch）更稳定
替代方案：放弃浮动，改用 display: flow-root 或 flex
如果你只是想让文字环绕图片并实现首行缩进，浮动真不是唯一解。现代布局下更干净的做法是：
- 图片用
float: left，但文字容器用display: flow-root（创建 BFC，自动避开浮动，且text-indent恢复生效） - 或者整体用
display: flex，图片flex: 0 0 auto，文字区域flex: 1，再对文字区域设text-indent - 注意：IE 不支持
flow-root，但 Flex 方案需 IE10+ 并加-ms-前缀
伪元素占位法虽兼容性好，但本质是 hack；真正要长期维护的项目，该升级布局方式就得升级——缩进对齐这事，不该被浮动绑死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
