浮动容器被文字撑开的典型表现是宽度异常变宽或换行错乱，根本原因是浮动元素未触发bfc且内部文本无换行约束；应优先用max-width配合word-break与overflow-wrap控制断行，并确保父级存在块级上下文。
浮动容器被文字撑开的典型表现
当你给一个 div 设置了 float: left，里面放一段长文本（比如用户昵称或日志摘要），结果整个容器宽度莫名其妙变宽、甚至换行错乱——这不是浏览器 bug，是浮动元素内部的「无约束内联内容」在默认行为下持续向右延伸，直到遇到边界才折行，而浮动容器本身不自动触发 BFC，无法限制其内部流式内容的溢出影响。
- 常见错误现象：
float容器高度塌陷 + 文字溢出容器右边缘 + 后续浮动元素被顶到下一行 - 根本原因：浮动元素的
width默认是auto，而内部纯文本没有强制换行机制，white-space: nowrap（默认不是）或长单词（如 URL、base64 片段）会直接撑开 - 不是所有情况都要加
overflow: hidden——它只是触发 BFC 的副作用之一，但会隐藏意外溢出的阴影、下拉菜单等
用 min-width + max-width 锁定浮动容器尺寸
比盲目加 overflow 更可控：明确告诉浏览器「这个浮动块最小不能小于图标区，最大不能超过父容器减去右边距」。
-
min-width防止内容过少时容器缩成一条线（比如空昵称+小图标） -
max-width是关键——它让浏览器在计算浮动宽度时有明确上限，文本自然会在该宽度内折行 - 避免写死像素值，优先用
calc(100% - 80px)这类相对计算，适配响应式布局 - 注意：IE9+ 支持
calc()，若需兼容 IE8，改用固定max-width或配合box-sizing: border-box
word-break 和 overflow-wrap 的分工
光靠容器尺寸控制还不够。中文基本能折行，但英文、数字串、URL 经常卡住——这时得干预文本自身的断行逻辑。
-
word-break: break-all：粗暴拆分任意单词，适合后台日志等对可读性要求低的场景 -
overflow-wrap: break-word（旧名word-wrap: break-word）：只在必要时拆长单词，保留正常词间空格，更适合用户昵称、标题等 - 两者可共存，但优先级不同：
overflow-wrap在有空格时生效，word-break在无空格长串时兜底 - 别漏掉
white-space: normal——如果父元素设了white-space: nowrap，上面两个属性全失效
真正可靠的组合方案（含 IE 兼容）
单独用某一个属性都可能翻车。生产环境建议按顺序叠加：
立即学习“前端免费学习笔记（深入）”；
- 给浮动容器加
max-width: calc(100% - 60px)（根据右侧预留空间调整） - 加
word-break: break-word（IE 支持）和overflow-wrap: break-word（现代标准） - 确保文本容器自身没设
white-space: nowrap或display: inline-block且未设宽 - 如仍需防高度塌陷，用
display: flow-root（Chrome 69+/Firefox 62+），比overflow: hidden更语义化；老版本 IE 用zoom: 1触发 hasLayout
最易被忽略的是：浮动容器的父元素是否也参与了浮动或设置了 display: inline-block。一旦外层也失去块级上下文，里面的 max-width 就会失效——这种嵌套浮动问题，调试时得一层层查 computed style，而不是只盯着目标元素。
