浮动元素导致text-indent失效，因其脱离文档流使首行基准错乱；可用padding-left替代或包裹父容器触发bfc来修复。
浮动元素后的文字无法直接用 text-indent 缩进——不是写法错，是 CSS 渲染机制决定的。 因为 text-indent 作用于块级容器的第一行文本内容区域，而浮动元素会脱离文档流，导致后续段落的“首行”起始位置被浮动项干扰，text-indent 计算基准失效。
为什么给浮动旁的 p 加 text-indent 没反应
常见场景：左侧一个 float: left 的图片，右侧紧跟一段 p 文字。此时即使给该 p 设置 text-indent: 2em，首行看起来仍顶到浮动元素边缘，毫无缩进感。
- 根本原因是：浮动元素未占据正常块流空间，
p的内容区域从浮动元素底部开始布局，其“第一行”的视觉起点已被挤压到浮动项右侧紧贴处，text-indent仍按容器左内边距计算，但视觉上被遮盖 - 浏览器开发者工具中能看到
text-indent值已生效（computed 样式里有），但缩进方向是向右，而浮动元素把可用宽度切碎了，导致缩进“挤”在窄缝里不可见 - 若该
p同时设置了overflow: hidden或display: flow-root（现代清浮动方式），反而可能让text-indent表现正常——但这属于副作用，不可依赖
真正能用的两种实操方案
不硬扛 text-indent，换思路：
-
方案一：用
padding-left替代 —— 给浮动旁的段落加padding-left: 2em，它作用于整个内容盒，不受浮动干扰；注意要同步调小max-width或预留足够容器宽度，避免换行错乱 -
方案二：包裹一层
div并触发 BFC —— 把浮动元素和段落都包进一个父容器，对该父容器设置overflow: hidden或display: flow-root，再单独给段落设text-indent: 2em；此时段落获得独立格式化上下文，text-indent基准恢复为父容器左内边距 - 避免用
margin-left：它会让整段位移，但首行相对段落左边缘仍无缩进，阅读节奏断裂
text-indent 在浮动上下文中容易被忽略的细节
即使你用了上述任一方案，这些点仍可能翻车：
- 浮动元素本身如果有
margin-right，会进一步压缩段落可用宽度，text-indent的 2em 可能撑出容器——建议统一用em单位，并检查父容器font-size - 如果段落里开头是
<strong></strong>或<span></span>等内联元素，text-indent仍只对“块内第一行文本”生效，但浏览器可能把缩进应用在不可见空格或换行符上，建议段落开头不要留空格、不换行 -
text-indent不继承自浮动元素，但会继承自父块；若父容器有text-indent，又没重置，子段落会叠加上去
浮动 + 缩进这类需求，本质是排版控制权的争夺。与其反复调试 text-indent，不如早一步用 display: flex 或 grid 重构图文混排——text-indent 是为纯文本流设计的，不是为浮动战场准备的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
