因为浮动强制将内联元素转为块级框，规范要求浮动元素必须是块级框才能参与布局，浏览器内部将computed value覆盖为block，使宽高、上下margin和padding全部生效。
内联元素（display: inline）一旦设置 float: left 或 float: right，浏览器会无视你写的 display 值，强制按 display: block 渲染——它不再是行内元素，宽高、上下 margin、padding 全部生效。
为什么 display: inline 加了 float 就能设宽高？
因为浮动触发了 CSS 规范中明确的 display 强制转换规则：浮动元素必须是块级框（block-level box），否则无法参与浮动布局。浏览器内部会把计算值（Computed Value）覆盖为 block，即使你在 Styles 面板里看到的仍是 inline——那只是“声明值”，不等于实际生效的渲染行为。
常见错误现象：
- 写
span { display: inline; float: left; width: 200px; }，结果宽度生效了，开发者纳闷“不是说inline不能设宽高吗？” - 用
vertical-align对齐几个inline-block按钮，其中一个加了float，立刻错位——因为它的 display 已退化为block，vertical-align失效
display: inline-block 和 display: flex 浮动后会发生什么？
同样被降级为 block，但语义和行为损失更明显：
-
inline-block原本支持基线对齐、行内间隙控制，浮动后这些特性全部消失，变成纯块级占位 -
flex容器一旦浮动，子项的flex行为完全失效；justify-content、align-items等不再起作用，整个 flex 上下文被破坏 -
display: table-cell浮动后，单元格的等高、自动拉伸逻辑也中断，退化为普通块盒
这不是浏览器 bug，而是规范要求：只要参与浮动，就必须是块级框，其他 display 类型只是“入场券”，不是“保留身份”。
哪些 display 值和 float 组合会出问题？
以下组合在实践中容易引发不可预期行为，应主动规避：
-
display: contents+float：多数浏览器直接忽略float，因为contents不生成盒子，而浮动必须作用于一个真实 box -
display: run-in（已废弃）+float：行为未定义，不同浏览器处理不一致 -
display: ruby系列（如ruby-base、ruby-text）+float：渲染不稳定，尤其在换行或嵌套时
简单判断原则：如果某个 display 值的本意是“不生成独立盒”或“依赖上下文生成特殊布局”，就别跟 float 搭配。
现代开发中该用什么替代浮动来保持 display 语义？
浮动本质是为图文环绕设计的，不是结构布局工具。要横向排列、对齐、响应式换行，优先选：
- 横向排列多个按钮/卡片：
display: flex，子项保持inline、inline-block、block都可，无需改 display - 复杂二维网格（比如商品列表）：
display: grid，列数、间距、对齐全由容器控制，子项 display 完全自由 - 仅需文字绕图：
float: left+shape-outside，此时 float 只影响文本流，不影响图片自身 display 计算（前提是图片没额外设浮动干扰）
真正容易被忽略的是：浮动的 display 强制转换是“单向不可逆”的——你没法靠 CSS 把它再变回原来的 display 语义。一旦用了 float，就等于主动交出了对 display 的控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
