当段落使用负 text-indent 实现悬挂缩进时，若页面中存在左浮动元素（如广告栏、侧边图），文本可能错误地覆盖在浮动块上。本文提供一种兼容性好、语义清晰的纯 css 解决方案：通过 clear: both 强制段落从浮动元素下方开始流式布局。
当段落使用负 text-indent 实现悬挂缩进时，若页面中存在左浮动元素（如广告栏、侧边图），文本可能错误地覆盖在浮动块上。本文提供一种兼容性好、语义清晰的纯 css 解决方案：通过 clear: both 强制段落从浮动元素下方开始流式布局。
在响应式排版中，悬挂缩进（hanging indent）常用于参考文献、术语表或引文列表，其典型实现是结合负 text-indent 与正 margin-left：
.hanging-indent {
text-indent: -20px; /* 首行向左突出 */
margin-left: 20px; /* 其余行整体右移，形成“悬挂”视觉效果 */
width: 400px;
}然而，当该段落前存在一个左浮动元素（例如 <div class="myfloat">）时，由于浮动脱离文档流，后续内联级内容（包括 <p>）会尝试环绕它——即使段落设置了 width 和缩进，浏览器仍按“浮动上下文”计算首行起始位置，导致文字侵入黄色浮动区域，破坏布局。
根本原因不是缩进值过大，而是浮动未被清除。CSS 浮动的渲染规则决定了：只要后续块级元素未显式声明 clear，它就会参与环绕布局，无论其内部是否含负缩进。
✅ 正确解法：在浮动元素与目标段落之间插入一个清除浮动的屏障：
<div class="myfloat"></div> <div class="clear"></div> <!-- 关键：清除左右浮动 --> <p class="hanging-indent"> Lorem ipsum dolor sit amet... </p>
对应 CSS：
.myfloat {
float: left;
width: 420px;
height: 100px;
background: yellow;
}
.clear {
clear: both; /* 或 clear: left，取决于浮动方向 */
height: 0;
overflow: hidden; /* 可选：防止外边距塌陷，保持高度可控 */
}
.hanging-indent {
text-indent: -20px;
margin-left: 20px;
width: 400px;
}⚠️ 注意事项：
- 不要依赖 overflow: hidden 或 display: flow-root 等现代属性来“包裹”浮动（虽有效但改变了容器格式化上下文，可能影响后续布局逻辑）；
- 避免对 <p> 本身设置 clear（如 clear: left），否则会强制整个段落下移，但无法保证悬挂缩进的视觉对齐稳定性；
- 若需复用，可将 .clear 封装为工具类（如 BEM 命名 .u-clear），或使用伪元素清除（.myfloat::after { content: ""; display: table; clear: both; }），但本例中独立 <div> 更直观、可维护性强；
- 此方案完全兼容 IE8+，无 JS 依赖，符合渐进增强原则。
总结：解决悬挂缩进与浮动冲突的核心，在于理解 CSS 浮动的布局机制——清除浮动不是“修复 bug”，而是显式声明布局意图。通过一个轻量、语义中立的清除元素，即可确保段落严格从浮动区域下方开始渲染，同时完整保留原有缩进样式与流式特性。
