当段落使用负 text-indent 实现悬挂缩进时，若其前存在左浮动元素（如广告栏），文本可能异常覆盖浮动区域。本文提供一种轻量、语义清晰且兼容性优秀的纯 css 解决方案：通过 clear: both 强制段落换行起始，避免与浮动元素重叠。
当段落使用负 text-indent 实现悬挂缩进时，若其前存在左浮动元素（如广告栏），文本可能异常覆盖浮动区域。本文提供一种轻量、语义清晰且兼容性优秀的纯 css 解决方案：通过 clear: both 强制段落换行起始，避免与浮动元素重叠。
在传统浮动布局中，float: left 元素会脱离文档流，后续内联级内容（如 <p>）将沿其右侧流动——这是浮动设计的本意。但当段落同时应用了负向悬挂缩进（例如 text-indent: -20px）并配合 margin-left: 20px 时，首行文字可能被“拉回”至浮动元素的水平区域内，造成视觉重叠，破坏排版结构。
根本原因并非 text-indent 本身，而是浮动上下文未被正确中断。浏览器仍视该 <p> 为浮动后的“环绕内容”，因此即使首行被左移，其布局基线仍锚定在浮动元素右侧。
✅ 推荐解法：插入清除浮动的占位元素
无需修改 display 类型（如弃用 block 改用 flex 或 grid），也不需 JavaScript 干预，仅需在浮动容器后、目标段落前添加一个具备 clear: both 的空元素即可：
.myfloat {
float: left;
width: 420px;
height: 100px;
background: #ffeb3b; /* 黄色更符合原意 */
}
.clear {
clear: both;
height: 0;
overflow: hidden;
font-size: 0; /* 可选：消除潜在空白高度 */
}
.hanging-indent {
text-indent: -20px;
margin-left: 20px;
width: 400px;
line-height: 1.6;
}<div class="myfloat"></div> <div class="clear"></div> <p class="hanging-indent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique... </p>
⚠️ 注意事项：
- .clear 元素必须位于浮动元素之后、目标段落之前，顺序不可颠倒；
- 使用 height: 0; overflow: hidden 可确保清除元素不占用额外空间，保持布局紧凑；
- 若项目已采用现代 CSS（如 Flexbox/Grid 布局），建议优先重构为语义化容器，但本方案专为需兼容旧版浏览器或保留浮动语义的场景而设；
- 避免滥用 clear: both 在大量段落中——仅对明确需要避开浮动的内容应用，以维持性能与可维护性。
总结而言，clear: both 是解决此类浮动干扰最直接、最可靠的方式。它尊重原始 HTML 流式结构，不破坏文本可访问性，也无需 hack 技巧或复杂计算，是 CSS 布局基础能力的典型高效实践。
