safari 中浮动图片需显式设 display: block 以支持 margin，父容器须用 display: flow-root 或伪元素创建 bfc 防塌陷，响应式中需同步清除 clear，且须声明 cursor:pointer 和真实尺寸来确保交互与层叠正确。
因为 Safari 对 BFC 触发更严格、对 inline 元素的 margin 处理更保守，不是 float 写错了，而是渲染意图没明确表达。
img 必须设 display: block
浮动图片若保持默认 display: inline，Safari 会忽略 margin-right 或 margin-left，导致文字紧贴图片边缘、无环绕间隙。这不是 bug，是 WebKit 对 inline 元素盒模型的保守处理。
- 必须显式写
img { display: block; }，哪怕只用于图文环绕 - 不加这句，
float: left+margin-right: 16px在 Safari 中等同于没写 margin - 如果 img 是响应式（如
max-width: 100%），仍需保留display: block，否则宽度计算可能回退到 content-box 行为
父容器必须创建 BFC
浮动子元素脱离文档流，父容器高度塌陷，文字就堆在图片下方——Chrome 可能“碰巧”撑开，Safari 则直接按 height: 0 渲染。
- 首选
display: flow-root：干净、无副作用，iOS Safari 15.4+ 稳定支持 - 兼容旧版（iOS 15.3 及更早）用伪元素：
::after { content: ""; display: table; clear: both; }，缺任意一项都会失效 - 避免
overflow: hidden：它虽能触发 BFC，但可能裁掉position: absolute的下拉菜单、阴影或 tooltip - 别用
clear: both放在空<div> 上——若该 div 有 <code>height: 0或font-size: 0，依然无法撑高父容器响应式断点里
clear容易失效当媒体查询取消浮动（如
@media (max-width: 768px) { img { float: none; } }），后续元素若还带clear: both，会导致意外空白，且 Safari 不会自动重置 clear 状态。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries下载规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须同步清除：
@media (max-width: 768px) { .text-block { clear: none; } } - 如果浮动后紧跟的是纯文本节点（没有
<p></p>或其他块级标签包裹），clear完全无效——Safari 要求 clear 必须作用于块级框 - 用 DevTools 的 Computed 面板确认
clear是否被计算为both，而不是被更高优先级规则覆盖
点击区域失灵？不是 float 的问题，是层叠上下文
图文能显示，但链接点不动、按钮无反馈，大概率是 img 被压在底层，而非样式错位。
- 给
img加cursor: pointer：这不是为了光标，而是向 WebKit 显式声明“此处可交互”，否则touchstart不派发 - 确保 img 有真实尺寸：
width和height不能为auto，且父容器未塌陷（可用getBoundingClientRect()验证） - 检查祖先节点是否意外创建新层叠上下文：比如
transform、opacity: 0.99、will-change，它们会让浮动内容被“压”到下层
最易被忽略的是：Safari 不会替你猜意图。它要求每个浮动场景都显式声明 display 类型、BFC 创建方式、交互能力与层叠层级——少一个，就少一分确定性。
- 必须同步清除：
