float 会强制忽略 display 声明，直接生成块级盒；其本质是脱离文档流并支持完整盒模型，故不兼容 inline-block 或 flex；开发者工具中显示的 display 值非真实布局值，应以行为（如 margin-top 是否生效、是否塌陷）为准。
float 会强制覆盖 display 声明，不是“转化”，而是跳过计算
浏览器不会先读取 display: inline 再把它“变成” block；而是只要 float 不是 none，就直接忽略你写的 display 值，按规范生成块级盒（block-level box）。这是 CSS2.1 明确规定的布局行为，不是渲染引擎的 bug 或兼容性补丁。
常见错误现象：
- 在 Chrome DevTools 的 Styles 面板里看到
display: inline仍被高亮，误以为生效了 - 给
span加float: left后设margin-top: 20px，发现起效了，却归因于“它变 block 了”——其实是因为浮动触发了块级盒模型，而非 display 值真被修改
真正判断依据不是 computed style 显示什么，而是看：
-
width/height是否可设且生效 -
margin-top/margin-bottom是否影响布局（行内元素本不该响应） - 元素是否脱离文档流（后续块级兄弟元素是否上移填补）
为什么必须是 block-level box？不能是 inline-block 或 flex？
浮动的本质是让元素“从流中抽离、靠边停靠、允许内容环绕”。这个行为需要完整盒模型能力：能定义尺寸、能响应上下外边距、能独立定位。而 inline 和 inline-block 在行内格式化上下文中受基线对齐、行框约束等限制，无法稳定支撑浮动位移逻辑。
所以规范强制要求：
-
float: left+display: flex→ flex 容器退化，子项不再受flex-direction控制 -
float: right+display: inline-block→ 基线对齐失效，vertical-align完全被忽略 - 哪怕写
display: inline !important，也无法恢复行内行为——float的优先级高于display
为什么开发者工具里 computed display 还显示 inline？
Chrome、Firefox 的 computed 样式面板返回的是“原始声明值”或“未受 float 干预前的 display”，不是真实参与布局的计算值。这容易误导调试。
验证方式更可靠：
- 在控制台运行
getComputedStyle(el).display，可能返回"inline"，但实际布局已按块级处理 - 用
el.getBoundingClientRect()看宽高是否随设置变化 - 观察父容器是否发生高度塌陷（典型块级化+脱离流的表现）
不要依赖面板显示的 display 值做布局判断，要看行为本身。
float 后还能用 vertical-align 对齐吗？
不能。一旦元素浮动，它就不再属于行内格式化上下文（IFC），vertical-align 失去作用对象。这是最常踩的坑之一。
典型误用场景：
- 给几个
span都加float: left，还想用vertical-align: middle让它们垂直居中对齐 - 混用
float和inline-block，以为能兼顾浮动与基线对齐
替代方案更直接：
- 用
display: flex+align-items替代浮动布局 - 若必须保留浮动，对齐需靠
margin、transform: translateY()或父容器line-height调整
float 的块级化不是为了让你继续当“行内元素用”，而是彻底换了一套布局规则——别试图在旧框架里打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
