outline 在浮动元素上失效是浏览器渲染差异所致：因 outline 不参与布局而浮动改变层叠顺序，WebKit/Blink 内核（Chrome/Safari）常跳过绘制，Firefox 则通常正常；推荐改用 border、现代布局或 outline-offset 绕过。
outline 在浮动元素上失效的常见表现
你给一个 float: left 的 <div> 设置了 <code>outline: 2px solid red，但在 Chrome 或 Safari 中完全看不到轮廓线，而换成 border 就立刻显示——这不是你的 CSS 写错了，是浏览器对浮动元素的 outline 渲染逻辑本身存在差异。
根本原因：outline 不参与盒模型布局，但浮动会改变渲染层叠顺序
outline 是绘制在元素“外部”的装饰性线条，不占空间、不影响布局，也不触发重排。但当元素设置了 float，它会脱离文档流并进入浮动上下文（float context），此时部分浏览器（特别是 WebKit/Blink 内核）在计算 outline 绘制区域时，可能因浮动框的几何边界未被正确识别或被裁剪而跳过绘制。
- Firefox 通常能正常渲染浮动元素的
outline - Chrome/Edge（基于 Blink）在某些 zoom 缩放值或父容器
overflow非 visible 时更易失效 - Safari（WebKit）对
outline+float的兼容性最不稳定，尤其在 flex/grid 父容器中嵌套浮动子元素时
绕过问题的实操方案（优先级从高到低）
别硬刚 outline 和 float 的组合，直接换更可控的方式：
- 用
border替代：语义虽不同（border 占空间），但视觉效果一致且 100% 可见；若需保持原有布局，可配合box-sizing: border-box和微调width/padding - 改用
outline-offset配合正向偏移：比如outline: 2px solid red; outline-offset: 2px;，有时能强制触发重绘（但不保证跨浏览器稳定） - 取消浮动，改用现代布局：把
float: left换成display: inline-block或更推荐的display: flex/display: grid，再加outline就毫无压力 - 极端情况可加
transform: translateZ(0)强制创建新层叠上下文，偶尔能唤醒 outline 绘制（但有性能代价，慎用）
调试时快速验证是否为 outline+float 导致的问题
三步定位：
立即学习“前端免费学习笔记（深入）”；
- 临时删掉元素的
float声明，看outline是否立刻出现 → 是，则确认是该组合问题 - 在开发者工具中选中元素，检查 computed 样式里
outline是否被标记为 “active” 但未渲染 → 若是，基本锁定渲染引擎限制 - 换 Firefox 打开同一页面，对比 outline 显示状态 → 若仅 Chrome/Safari 失效，大概率是 Blink/WebKit 的已知行为，非 bug
真正容易被忽略的是：outline 本就不是为浮动场景设计的，它的规范定位就是“聚焦提示”或“无障碍高亮”，而浮动元素极少需要这类语义。强行混用，等于在过时布局模式上叠加装饰性样式，出问题几乎是必然的。
