ruby加float会彻底乱掉，因其是行内级替换元素，浮动会破坏rb/rt/rp的行内布局流，导致rt错位、父容器高度塌陷、后续元素覆盖。

ruby 标签本身不支持 float，强行给它设 float: left 会导致注音文字（rt）错位、父容器高度塌陷、后续元素上浮覆盖——这不是浏览器 bug，是 CSS 规范对替换元素和行内格式化上下文的明确限制。

为什么ruby加float会彻底乱掉

根本原因有三层：ruby 是行内级替换元素，其内部结构（rb/rt/rp）依赖行内布局流；float 会把它强行拉出当前行内上下文，但 rt 仍按原位置渲染，造成视觉分离；更关键的是，浮动后的 ruby 会让包含它的段落（p）或 div 高度坍缩为 0，后续内容直接顶上来。

• 典型现象：日文注音显示在文字右侧甚至页面顶部，rt 悬空，下方 div 被遮盖
• 开发者工具里能看到 p 的 Computed height = 0，即使里面塞了 5 个 ruby
• 哪怕只对 ruby 单独设 float，也足以触发整个父块级容器的塌陷

不用float也能实现注音左对齐或右对齐

现代方案完全绕过浮动，用原生语义+弹性控制：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 保持 ruby 为默认 display: ruby（行内），用 text-align: left/right/center 控制整行对齐
• 需要单个 ruby 独占一行并居右？外层包 div 并设 text-align: right，不要动 ruby 自身
• 要让注音文字（rt）离基文远一点？改 ruby 的 ruby-position: over（默认值） + line-height 或 margin-block-start 微调间距
• 绝对禁止给 rt 或 ruby 设 float、position: absolute、display: block —— 这三者都会破坏注音绑定逻辑

如果必须嵌入浮动布局中（如老项目兼容）

唯一安全做法是：把整个 ruby 块当作一个不可分割的“图像”来处理，用容器隔离：

• 给 ruby 外层套一层 div，设 float: left（不是给 ruby 本身）
• 该 div 必须带清除机制：display: flow-root（推荐）或 overflow: hidden
• 同时确保这个 div 有明确宽度（比如 width: 200px），否则 ruby 在窄屏下会换行错乱
• 千万别用 clearfix 类——伪元素清除对 ruby 内部结构无意义，且可能引发 Safari 15.6 以下的渲染抖动

最常被忽略的一点：ruby 的兼容性本身没问题（Chrome 5、Firefox 38、Safari 5、Edge 12+ 都支持），但一旦混用 float，问题就从“样式微调”升级成“布局崩溃”，修复成本远高于重构为 display: inline-flex 或纯语义写法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！