CSS浮动在邮件HTML模板中的核心地位_兼容各大客户端

outlook 桌面版（2007–2019）使用 word 渲染引擎，完全不支持 Float，导致浮动元素退回块级流、布局崩溃；唯一可靠方案是用 html 表格结构，配合工具链生成兼容代码。

为什么 Outlook 会把 float 当成透明空气

因为 Outlook 桌面版（2007–2019）用的是 Word 渲染引擎，根本不支持 float。它看到 float: left 就直接忽略，元素退回块级默认流，整排布局崩掉。

这不是 bug，是设计如此——Word 从不处理 css 浮动。所以你在 Gmail 或 Apple Mail 里调好的两栏布局，到 Outlook 里变成上下堆叠，不是你写错了，是它压根没解析。

• 所有基于 float 的栅格系统（比如老式 .col-left + .col-right）在 Outlook 中失效
• clear: both 同样无效，无法靠它“收尾”浮动容器
• 哪怕加了 !important 或内联 style，也救不回

替代方案只有一条路：用 <table> 做结构，<code>float 仅作备用

邮件客户端中唯一真正跨平台可靠的布局机制，仍是 HTML 表格。现代写法不是全盘手写 <table>，而是用工具链（如 MJML、Foundation for Emails）编译出带嵌套 <code><table> 的代码，同时保留 <code>float 给支持它的客户端（Gmail App、Apple Mail、Thunderbird）用作视觉增强。

• 主容器用 <table width="100%">，子列用 <code><td width="50%">，而非 <code>div + float
• 如果必须用 div（比如响应式断点），则为 Outlook 单独加 class="gmail-fix" 并用 @media only screen and (max-width: 600px) 控制，但桌面 Outlook 不认媒体查询，所以这层只对移动端有效
• 绝对不要依赖 float 实现关键信息并排——比如“价格+按钮”必须同行，就用 <table><tr> <td>¥99</td> <td><a>购买</a></td> </tr></table>

float 在哪些客户端还能用？别赌，要查实

不能凭印象判断。比如 Gmail Web 版自 2023 年起已移除对 float 的支持（改用更严格的 CSP 策略），但 Gmail android/ios App 仍部分支持；Apple Mail 支持，但 iOS 17 后某些嵌套场景会重置 float 上下文。

立即学习“前端免费学习笔记（深入）”；

• 可靠支持 float 的：Apple Mail（macos/iOS）、Thunderbird、spark、Outlook.com（Web）
• 明确不支持的：Outlook 桌面（2007–2019）、Yahoo Mail（Web/App）、ProtonMail（Web）
• 有条件支持的：Gmail App（Android/iOS）——仅限单层 float: left/right，不支持 float: none 覆盖

验证方式很简单：发测试邮件到 litmus.com 或 emailonacid.com，别信文档，看真实渲染快照。

一个常见翻车点：用 float 做响应式图片居中

很多人写 <img style="max-width:90%" alt="CSS浮动在邮件HTML模板中的核心地位_兼容各大客户端" > 想让图片右对齐，结果在 Outlook 里图片贴左、文字跑飞。这是因为 margin-left: auto 在 Word 引擎中完全无效，且 float 失效后，img 回退为行内元素，和前后文本挤在同一行。

• 正确做法：用 <table align="right"> 包住图片，或用 <code><div align="right">（注意这是 HTML 属性，非 CSS） <li>避免混合写法，比如 <code><div style="float:right"><img alt="CSS浮动在邮件HTML模板中的核心地位_兼容各大客户端" ></div> —— div 宽度未设，Outlook 会把它当 0 宽处理，图片直接溢出
• 如果要用 CSS 控制图片尺寸，优先用 width + height 内联属性，而不是 max-width: 100%（Outlook 不认）

浮动不是布局工具，是兼容性陷阱里的诱饵。你越早把它当成“可有可无的装饰”，越不容易被客户端差异拖垮交付节奏。