用 overflow: hidden 触发 BFC 解决 Float:left 后文本跑飞，仅作用于文字容器；兼容老项目时比 flex 更稳妥，需注意容器高度、行高及图标尺寸固定。
float:left 之后文本跑飞了怎么办
图标用 float: left 后，右侧文字常出现两行以上却撑不开容器、甚至被截断——根本原因是浮动元素脱离文档流，而后续块级元素（比如 <p> 或 <div>）默认不为浮动元素“让出空间”，导致文字区域实际宽度仍是 100%，换行逻辑照常触发。
解决核心不是调文字，而是给文字容器加一层“边界意识”：让它知道“左边有浮动，我不能占满”。overflow: hidden 是最轻量且兼容性好的方式，它会触发 BFC（块级格式化上下文），让容器自动收缩包裹内容，同时避开浮动影响。
- 只对文字所在容器（如
<div class="text">）设overflow: hidden，不是父容器也不是图标本身 - 不要用
overflow: auto或scroll，可能意外加滚动条 - IE6/7 需补
zoom: 1触发 hasLayout，但现代项目基本可忽略
为什么不用 flex 或 grid 替代 float
能用 display: flex 当然更干净，但如果你在维护老项目、或需要支持 IE10 及以下，float + overflow:hidden 仍是稳妥解法。Flex 布局里 align-items: flex-start 和 flex: 1 给文字区就能自然实现左图标右文本，但要注意：
-
flex容器默认flex-direction: row，图标必须是第一个子元素 - 文字区域必须设
flex: 1或min-width: 0，否则长文本会撑破容器（尤其含英文无空格时） - IE10 对
flex-wrap和flex-basis支持不一致，overflow: hidden反而更可控
overflow:hidden 导致文字被截断的常见原因
加了 overflow: hidden 却发现文字少了几个字？大概率是容器高度被限制死，或内边距/行高没预留足够空间。
立即学习“前端免费学习笔记（深入）”；
- 检查文字容器是否有硬编码的
height或max-height，删掉或改用min-height - 确保
line-height和padding不会压缩实际可渲染区域 - 如果文字含 Emoji 或特殊字体，某些浏览器下
line-height计算异常，可尝试设line-height: 1.4这类具体值而非normal - 用 chrome DevTools 的“Layout”面板看 computed height，确认是否被意外压缩
图标尺寸变化时布局错位怎么稳住
图标用 img 或 icon font 时，尺寸一变，文字区域就偏移——因为 float 元素的宽度直接影响 BFC 容器的可用宽度。
- 给图标固定宽高：
width: 24px; height: 24px;，配合Object-fit: contain（图片）或font-size（icon font） - 避免用
%或em设图标尺寸，除非父容器尺寸绝对稳定 - 文字容器不要设
width，让它由overflow: hidden自动计算剩余空间 - 如果图标需响应式缩放，用
max-width: 100%+height: auto，并确保父容器有明确max-width
事情说清了就结束。真正容易被忽略的是：文字容器是否真的“只包文字”，而不是套着多层没清除浮动的 <div> ——每多一层浮动上下文，overflow: hidden 的作用范围就可能偏移一点。