Safari 中浮动图文环绕异常的根源是父容器未触发 BFC 或 img 未设 display: block，因其对 BFC 触发更严格、inline 元素 margin 处理更保守，需显式声明 display: block 和 display: flow-root（或伪元素清除）才能正常环绕。
Safari 中浮动图文环绕异常，90% 是父容器未触发 BFC 或 img 未设 display: block，不是 float 值写错了。
为什么 Safari 里文字不绕图，但 Chrome 正常？
根本原因不是 Safari “不支持 float”，而是它对 BFC 触发更严格、对 inline 元素 margin 的处理更保守。常见现象包括：
- 文字完全不绕图，堆在图片下方（父容器塌陷 + 未触发 BFC）
- 文字紧贴图片边缘，没留空隙（
img缺display: block，margin-right被忽略） - 第一段绕得好，第二段从图片底部开始（父容器没“包含”浮动高度）
这些在 Chrome 可能因宽容策略“碰巧”正常，但在 Safari 会立刻暴露。
必须写的两个关键声明
仅写 float: left 和 margin-right: 16px 不够。Safari 要求更明确的渲染意图：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
-
img必须显式设display: block——否则部分 WebKit 版本忽略margin，文字环绕边界就是图片盒本身，无间隙 - 父容器必须创建 BFC：
display: flow-root是首选；若需兼容 iOS 15.3 及更早，用::after伪元素清除，且必须含content: ""、display: table、clear: both - 别用
overflow: hidden替代——它在 Safari 中可能裁掉position: absolute下拉菜单或阴影
响应式断点里容易漏掉的 clear 失效
当屏幕变小、取消浮动（如 @media (max-width: 768px) { img { float: none; } }），clear: both 不会自动清空。如果后续元素还带 clear: both，会导致意外空白。
- 务必同步重置：
@media (max-width: 768px) { .text-block { clear: none; } } - 如果浮动后紧跟的是纯文本节点（没包
<p>），clear完全无效——必须先用块级标签包裹那段文字 - 检查 DevTools 的 Computed 面板，确认
clear是否被计算为both，而不是被更高优先级规则覆盖
iOS Safari 点击图文区域失灵？别只调 float
浮动图片旁的文字能显示，但点击链接或按钮没反应，大概率是层叠上下文问题，而非样式错位：
- 给
img加cursor: pointer——这不是为了光标，而是向 WebKit 显式声明“此处可交互”，否则 touchstart 不派发 - 确保
img有真实尺寸：width和height不能为auto且父容器未塌陷（用getBoundingClientRect()验证） - 检查祖先节点是否意外创建了新层叠上下文（如
transform、opacity: 0.99、will-change），它们会把浮动内容“压”到下层
最易被忽略的是：你看到的环绕效果是 DOM 结构和 BFC 共同作用的结果，改一个属性往往不够，得同时确认 display、float、clear、position 四者的协作关系。 Safari 不会替你容错，它只按规范执行。
