当使用 text-indent: -20px 配合 margin-left: 20px 实现悬挂缩进时，若前有左浮动元素（如广告栏），文本可能异常覆盖其上；根本解法是通过 clear: both 强制段落从浮动元素下方开始流式布局。
当使用 text-indent: -20px 配合 margin-left: 20px 实现悬挂缩进时，若前有左浮动元素（如广告栏），文本可能异常覆盖其上；根本解法是通过 clear: both 强制段落从浮动元素下方开始流式布局。
在 CSS 布局中，浮动（float）虽已逐渐被 Flexbox 和 Grid 取代，但在兼容性要求高或遗留系统中仍广泛存在。一个典型问题场景是：左侧有一个黄色浮动块（如侧边广告或图标容器），右侧紧跟一段带悬挂缩进（hanging indent）的段落——即首行向左突出、其余行保持正常左边界。此时若仅靠 text-indent 与 margin-left 组合控制缩进，浏览器会将该 <p> 元素的内容区域（content box）仍视为紧贴浮动元素右侧起始，导致首行文字“穿透”到浮动块下方甚至重叠显示，破坏视觉层次。
根本原因在于：浮动元素脱离文档流，但后续内联级内容（如段落中的文字）仍会围绕它进行环绕排版；而 text-indent 仅影响首行内联盒的水平偏移，并不改变整个块级元素的定位上下文。因此，解决思路不是微调缩进值，而是确保段落块级容器本身避开浮动影响区。
最简洁、语义清晰且兼容性极佳的方案是：在浮动元素之后、目标段落之前插入一个清除浮动的占位元素（或直接对段落应用清除）：
.myfloat {
float: left;
width: 420px;
height: 100px;
background: #ffeb3b; /* 更准确的黄色 */
}
.hanging-indent {
text-indent: -20px;
margin-left: 20px;
width: 400px;
/* 关键：清除左侧浮动，使本元素从新行开始 */
clear: both;
}<div class="myfloat"></div> <!-- 不再需要额外空 div --> <p class="hanging-indent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc... </p>
✅ 推荐做法：直接在 .hanging-indent 上添加 clear: both，而非插入无意义的 <div class="clear"></div>。这更符合语义化原则，减少 DOM 节点，也避免因空 div 未设高宽引发的意外高度塌陷问题。
⚠️ 注意事项：
- clear: both 表示该元素的上边界不得与任何左右浮动元素的下边缘在同一水平线内，从而强制其“下沉”至浮动元素底部之下；
- 若页面中存在多个浮动模块，需确保清除作用范围准确——例如仅需避开左侧浮动时，用 clear: left 即可，提升性能；
- 不要试图通过 overflow: hidden 或 display: flow-root（虽有效）替代 clear，因其本质是创建新的 BFC，可能意外截断阴影、下拉菜单等溢出内容；
- 悬挂缩进本身建议配合 line-height 和字体度量校准，避免首行突出部分与浮动块视觉割裂。
总结：面对浮动 + 负缩进的布局冲突，核心不是“约束文字”，而是“约束容器”。用 clear 明确声明布局意图，既符合 CSS 规范设计逻辑，又具备全浏览器支持（IE6+），是稳健可靠的工程实践。
