float: inherit 无效，因 float 是非继承属性，始终回退到初始值 none；想实现方向适配应使用 direction + float 或逻辑属性 float: inline-start。
float: inherit 为什么不起作用？
因为 float 是一个**不继承属性**，写 float: inherit 看似合理，实则无效——它不会从父元素拿 float 值，而是按规范回退到初始值 none。浏览器根本不管父级 float 是 left 还是 right，一律当没写。
常见错误现象：float: inherit 在子元素上加了但布局完全没变化；调试时发现 computed style 显示 float: none，一脸懵。
- 只有 CSS 属性明确标注“inherited”（比如
color、font-size）才真能继承 -
float在 CSS2.1 和 CSS3 中始终是非继承属性，规范没改过 - 某些旧版 IE（如 IE6/7）会误触发“继承行为”，但这属于 bug，不能依赖
替代方案：用 direction 或 text-align 控制流向
如果你真正想实现的是“让子元素自动适配父容器的布局方向（比如 RTL 场景下右对齐浮动）”，float: inherit 不是解法，direction + float 组合才是。
使用场景：多语言站点（含阿拉伯语、希伯来语）、需要支持 LTR/RTL 切换的组件库、CSS-in-JS 动态主题中避免硬编码 left/right。
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
direction: rtl，再给子元素设float: right→ 实际表现等效于“视觉上的左浮”，但语义清晰 - 更健壮的做法是配合逻辑属性：
float: inline-start（现代浏览器）或用margin-inline-start替代部分浮动需求 - 注意：
float: inline-start兼容性较好（Chrome 87+、Firefox 89+、Safari 15.4+），但 IE 完全不支持
真要“继承 float 行为”？得靠 JS 或预处理器
纯 CSS 没法让 float 继承，但你可以把“浮动方向”变成可传递的状态变量。
常见做法是在父元素上打标记类，再用属性选择器控制子元素：
.layout-rtl .child { float: right; }
.layout-ltr .child { float: left; }
或者用 CSS 自定义属性 + float 计算（需配合 JS 更新）：
.parent { --float-dir: left; }
.parent.rtl { --float-dir: right; }
.child { float: var(--float-dir); }
- PostCSS 插件（如
postcss-custom-properties）能降级处理var()，但float不支持 calc() 或 fallback，所以必须保证--float-dir值合法 - React/Vue 中更推荐用 class 切换，比操作 style 或 CSS 变量更可控
- 别试图用
@supports (float: var(--x))做兼容判断——这语法本身不合法，浏览器直接忽略整条规则
浮动方向搞错时最常卡在哪
不是语法写错，而是混淆了「书写方向」、「块流向」和「浮动锚点」三者关系。
比如在 direction: rtl 的容器里写 float: left，元素会贴着容器**右边**浮起——因为 left 指的是**行内起始侧**，而 RTL 下起始侧就是右。这个反直觉点，90% 的人第一次都会翻车。
- 检查 computed style 时，重点看
direction和writing-mode，它们会彻底改变left/right的含义 - Flex/Grid 已经能覆盖绝大多数浮动场景，真需要响应式方向切换，优先考虑
justify-content: flex-start+flex-direction组合 - 如果组件必须用浮动（比如兼容老系统），就把方向逻辑收口到一个 class 名里，别散落在多个
float声明中
浮动方向不是值的问题，是上下文的问题。漏掉 direction 或 writing-mode 的影响，比写错 float 值更难排查。
