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的：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覆盖 - 正确做法：用
<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 不认）
float 在哪些客户端还能用？别赌，要查实
不能凭印象判断。比如 Gmail Web 版自 2023 年起已移除对 float 的支持（改用更严格的 CSP 策略），但 Gmail Android/iOS App 仍部分支持；Apple Mail 支持，但 iOS 17 后某些嵌套场景会重置 float 上下文。
立即学习“前端免费学习笔记（深入）”；
验证方式很简单：发测试邮件到 litmus.com 或 emailonacid.com，别信文档，看真实渲染快照。
一个常见翻车点：用 float 做响应式图片居中
很多人写 <img style="max-width:90%" alt="CSS浮动在邮件HTML模板中的核心地位_兼容各大客户端" > 想让图片右对齐，结果在 Outlook 里图片贴左、文字跑飞。这是因为 margin-left: auto 在 Word 引擎中完全无效，且 float 失效后，img 回退为行内元素，和前后文本挤在同一行。
浮动不是布局工具，是兼容性陷阱里的诱饵。你越早把它当成“可有可无的装饰”，越不容易被客户端差异拖垮交付节奏。
