根本原因是父容器高度塌陷且文本未被约束换行；clear: both仅定位自身而不恢复父容器高度感知，需配合BFC触发（如display: flow-root）与overflow-wrap: break-word+white-space: normal协同解决。
浮动导致长文本溢出，根本原因不是“文字太长”，而是父容器高度塌陷 + 文本未被约束换行。只加 clear 或只设 word-break 都不能单独解决问题。
为什么 clear: both 无法阻止文本溢出
clear 只影响元素自身的定位位置，不改变父容器对浮动子元素的感知能力。常见错误现象：在浮动元素后加一个 <div style="clear: both"></div>，但父容器仍无高度，后续文本直接叠在浮动区下方或跑出边界。
- 清除元素必须是父容器的最后一个子元素，且不能被
display: none或visibility: hidden隐藏 - 如果清除元素用了
height: 0; font-size: 0却没配overflow: hidden，IE7 等旧浏览器可能仍不触发 BFC，父容器高度计算失败 - 更可靠的做法是伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，它不新增 DOM 节点，也不干扰布局流
word-break 和 overflow-wrap 的选择逻辑
两者都用于断开长内容，但语义和行为不同，误用会导致中文可读性下降或英文单词被粗暴截断。
-
word-break: break-all：允许在任意字符间断行，适合纯技术场景（如代码块、URL 列表），但对中文标题会切成单字，阅读体验差 -
overflow-wrap: break-word（推荐）：仅在无其他换行点时才断词，优先保持单词完整，对中英文都友好；注意它必须配合white-space: normal才生效 - 若容器已设
white-space: nowrap（比如为了配合text-overflow: ellipsis），overflow-wrap就完全失效 —— 这是实际项目中最常踩的坑
浮动 + 长文本的最小可行修复组合
不是堆砌属性，而是分层解决：先让父容器“看见”浮动元素，再约束文本换行行为。
立即学习“前端免费学习笔记（深入）”；
- 给浮动元素的直接父容器加
display: flow-root（现代方案）或overflow: hidden（兼容 IE6+，但慎用于弹窗类容器） - 在文本容器上设置
overflow-wrap: break-word+white-space: normal，避免长 URL 或连续无空格字符串撑破宽度 - 若需保留英文单词完整性，可叠加
hyphens: auto（需配合 lang 属性和浏览器支持） - 绝对不要对浮动元素自身设
width: 100%后再加word-break—— 浮动脱离文档流后，100% 是相对于初始包含块，不是父容器
真正容易被忽略的是：浮动布局下，文本容器的宽度计算依赖于父容器是否形成 BFC。没触发 BFC 时，word-break 再怎么设，文本也还是在“虚空中”换行 —— 看似生效，实则换行点错乱，尤其在 flex 容器里嵌套浮动时，表现更不可预测。
