overflow:hidden不能真正清除浮动，而是通过触发bfc使文字容器重新纳入浮动元素高度计算并强制内容在边界内重排；推荐用display:flow-root替代，语义清晰且无裁剪副作用。
直接给文字容器加 overflow: hidden 是最常用、也最容易出问题的解法——它确实能阻止环绕，但不是靠“隐藏文字”，而是靠触发 BFC（块级格式化上下文）来隔离布局影响。
为什么 overflow: hidden 能阻止环绕
浮动元素脱离文档流，后续行内内容（比如段落文字）会自动绕开它；而 overflow: hidden 让文字容器自身形成一个 BFC，这个容器就会：
- 把内部浮动元素“重新纳入计算范围”，避免高度塌陷
- 强制文字在自己的边界内重排，不再向浮动区域延伸
- 不依赖 clear 或父容器干预，作用点精准到文字容器本身
注意：overflow: visible（默认值）不会触发 BFC，所以无效；overflow: clip 效果相同且无裁剪副作用，但 IE/旧 Edge 不支持。
overflow: hidden 的典型误用场景
常见错误是把它加在浮动图片上，或加在没明确尺寸的文字容器上：
- 给
<img>加overflow: hidden：完全没意义，图片不是文本容器，也不参与文字换行逻辑 - 给
<p></p>加但没设width或max-width：BFC 虽然触发了，但容器宽度由内容撑开，文字仍可能从右侧“绕回来” - 在 flex 容器子项里加：flex item 默认不响应
overflow对布局的影响，BFC 触发但不起隔离作用
更安全的替代写法：用 display: flow-root
如果你只是想阻止环绕，又怕 overflow: hidden 意外裁剪弹窗、阴影、绝对定位元素等，display: flow-root 是语义更清晰、副作用为零的选择：
- 它专为创建 BFC 设计，Chrome 58+/Firefox 57+ 均支持
- 保留原有
overflow行为（比如仍可设overflow: visible） - 无需担心子元素因溢出被隐藏，也不影响 transform 或 position: absolute 的渲染边界
示例：.content { display: flow-root; } —— 这一行就比 overflow: hidden 更干净。
真正容易被忽略的细节：方向性与嵌套 BFC
text-overflow: ellipsis 在 RTL 环境下省略号会出现在左侧，如果文字容器是 direction: rtl 但父级是 LTR，行为可能不一致；更隐蔽的是，如果文字容器内部还嵌套了另一个 BFC（比如子元素也用了 display: flow-root），外层的 BFC 隔离效果会被局部削弱——此时环绕可能在子容器内重现。这种嵌套干扰很难调试，得逐层检查 display 和 direction 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
