ruby 元素不能 float，否则 rt 定位失控、注音错位、行高塌陷；应改用 display: inline-block + text-align 或 flex 布局来实现块级排列与响应式换行。
ruby 标签本身是 inline 元素，与 float 混用会直接破坏注音对齐逻辑——不是“能不能浮”，而是“一浮就废”。
ruby 元素不能 float，否则 rt 位置彻底失控
浮动会让 ruby 脱离文本流，而 rt 的定位依赖于基字在行内流中的自然位置。一旦 ruby 被设为 float: left 或 float: right，rt 就不再相对于基字上标，而是按浮动块的边界计算，常见表现有：
-
rt垂直偏移异常，甚至跑到基字左侧或下方 - 多字并列时，各
ruby宽度不一致，导致拼音横向错位 - 行高塌陷，上下行文字被挤压，注音重叠
这不是浏览器 bug，而是规范行为：ruby 的渲染模型不支持浮动参与布局计算。Chrome、Firefox、Safari 在此场景下表现高度一致——全都失效。
想让 ruby 块级排列？用 display: inline-block + text-align
若需控制整组注音（如生字表）横向居中、等宽排列，应放弃 float，改用更可控的行内块方案：
- 给包裹
ruby的容器（如div）设text-align: center - 每个
ruby加display: inline-block和固定宽度（如width: 60px） - 避免给
ruby自身设margin或padding，改用容器内letter-spacing或word-spacing控制字间距
示例 CSS：
ruby { display: inline-block; width: 56px; text-align: center; }
.ruby-container { text-align: center; }
注意：display: inline-block 会引入幽灵空白，若出现多余间隙，优先用 font-size: 0 清除父容器字体大小，再单独给 ruby 设 font-size。
响应式场景下 ruby 换行错位，别碰 float，改用 flex + word-break
当容器变窄（如移动端），ruby 默认不会断行，但强行用 float 切割会导致注音与基字分离。正确做法是保留其 inline 特性，靠容器控制换行：
- 给父容器设
display: flex; flex-wrap: wrap;，每个ruby作为 flex item - 为防止单个
ruby过宽撑开，加flex-shrink: 1; min-width: 0; - 若需强制按字换行（如古诗竖排转横排），用
white-space: normal; word-break: keep-all;配合（零宽空格）手动切分
关键点：所有这些方案都绕开了 float，因为 ruby 的语义和渲染机制决定了它必须活在文本流里——浮动是它的天敌，不是选项。
最常被忽略的是：哪怕只给一个 ruby 加了 float，整行后续所有 ruby 的对齐都会连锁偏移。问题往往不出现在你写的那行代码，而出现在它前面那个被遗忘的 float: left。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
