float 强制元素按块级盒渲染，覆盖所有 display 声明；即使 display: inline 或 flex，加 float 后 width/height、上下 margin 生效，脱离文档流，vertical-align 失效，computed style 显示不可信。
float 不是“改变” display，而是强制浏览器按块级盒（block-level box）渲染，完全忽略你写的 display 值——哪怕你写了 display: inline 或 display: flex，只要加了 float: left，它就失效。
float 会覆盖所有 display 声明值
这是 CSS2.1 规范明确要求的：浮动元素必须生成块级框，否则无法参与浮动布局。浏览器内部直接跳过你的 display 声明，按 display: block 处理盒模型。
-
display: inline+float: left→ 渲染行为等同于display: block：能设width/height、上下margin生效、脱离文本流 -
display: flex+float: right→ flex 容器退化为普通块级容器，子项不再受flex-direction控制 -
display: inline-block+float→ 基线对齐、间隙等特性全部丢失 - 即使写
display: inline !important，也无法恢复——float的优先级高于display
computed style 显示的 display 值不可信
开发者工具里 “Computed” 面板看到的 display 值，是浏览器最终用于布局的计算值；但很多浏览器（如 Chrome）在有 float 时仍显示你原始写的 display: inline，容易误判。
- 真正判断是否块级化，看能否设置
width、上下margin是否生效、是否脱离文档流 - 用
getComputedStyle(el).display在控制台查，返回的可能是"inline"，但实际布局已按块级处理 - 不要依赖样式面板的显示值做调试依据，要观察渲染行为本身
为什么 float 后 span 能设 width/height？
不是因为 span “变成了块级元素”，而是浏览器给它套了一个隐式的块级盒（block-level box），这个盒拥有完整盒模型能力。
- 未设
width的浮动元素会收缩包裹内容，不像普通block那样默认占满父容器宽度 -
vertical-align失效——因为它已不在行内格式化上下文中 - 父容器高度塌陷，和
display无关，只因它脱离了文档流，父容器根本“看不见”它 - 想撤销效果，必须显式写
float: none；clear或overflow: hidden只影响周围环境，不还原该元素自身渲染模式
真正麻烦的地方在于：你改了 display 却发现没用，或者在调试时反复检查 display 值却忽略 float 的存在——它不报错、不警告，只是静默接管整个盒模型行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
