overflow: hidden 通过触发 bfc 阻止文字容器受浮动影响，使其从顶部开始正常换行；必须作用于文字容器本身，且不能是 inline/inline-block 元素，推荐用 display: flow-root 替代。
为什么给文字容器加 overflow: hidden 就能阻止绕行
浮动图片脱离文档流，但文字作为行内内容仍会为它“让位”，导致文字从图片底部开始继续环绕——这其实是 CSS 的字围（inline formatting context）行为。而 overflow: hidden 的作用不是裁剪，是触发 BFC（块级格式化上下文），让文字容器自成一块独立布局区域：它不再响应外部浮动的留白空间，也不被浮动撑开或压缩，自然就老老实实从顶部开始、按自身宽度换行。
overflow: hidden 必须加在文字容器上，不是父容器也不是图片
常见错误是把 overflow: hidden 加到图片的父 <div> 上，结果整个图文区块被裁剪；或者加在 <code><img> 自身上，完全无效——因为图片已经是浮动元素，overflow 对它不产生 BFC 效果。
正确做法是：
- 只对包裹文字的块级元素设置，比如
<p class="caption"></p>或<div class="text-content"> <li>该容器不能是 <code>display: inline或inline-block，否则无法触发 BFC - 避免同时设
height或max-height，否则可能意外截断多行文字 - Chrome 58+、Firefox 55+、Edge 79+、Safari 10.1+（iOS Safari 10.3+）
- IE 不支持，但 IE 已淘汰，无需 fallback
- 若需支持极老环境（如 IE10），可回退到
overflow: hidden，但得额外检查是否真有溢出内容 -
overflow: hidden在小屏下仍生效，把本该换行显示的长标题或按钮给裁掉了 -
clear: both没被设为clear: none，导致小屏下段落间凭空多出一大段空白 - 用 DevTools 查看 computed 样式，确认断点后这些值是否真的被覆盖
比 overflow: hidden 更干净的现代写法：display: flow-root
display: flow-root 是专为触发 BFC 设计的值，语义明确、无副作用：它创建新格式化上下文，但不会隐藏溢出内容，也不影响子元素定位或滚动行为。
兼容性已足够可靠：
容易忽略的坑：响应式中 overflow 和 clear 的残留问题
如果在媒体查询里取消了图片浮动（float: none），但没同步重置文字容器的 overflow 或后续元素的 clear，可能出现两种异常：
真正难调试的，从来不是“怎么让文字不绕图”，而是“什么时候该撤掉这个保护”——浮动生命周期和响应式状态切换之间，差一行重置样式，布局就错位。
