float会强制元素按块级盒参与布局，覆盖display声明；computed值仍显示原始display（如inline），但实际行为等同block：可设宽高、上下margin生效、脱离文档流。
它不会改变 display 的计算值，而是直接跳过 display 声明，强制按块级盒（block-level box）参与布局——你看到的 computed display 值（比如 inline）只是“写在样式表里的原始值”，不是浏览器真正用来布局的那个值。
float 会覆盖 display 声明，不是“转换”或“修改”
浏览器在布局阶段，只要遇到 float: left、float: right 或 float: inline-start（非 none），就会忽略你写的 display 值，不走 display 计算逻辑，直接生成块级盒。这不是 bug，是 CSS2.1 规范强制要求的行为。
-
display: inline+float: left→ 渲染行为等同于display: block：能设width/height、margin-top生效、脱离文本流 -
display: flex+float: right→ flex 容器退化：子项不再响应flex-direction、justify-content等 -
display: inline-block+float→vertical-align失效、基线对齐丢失、父容器内空格/换行影响消失 - 哪怕写
display: inline !important，也拦不住 float 的覆盖——它的优先级高于display
为什么开发者工具里还显示 display: inline？
Chrome 和 Firefox 的 “Computed” 面板返回的 display 值，多数时候是原始声明值（或未被 float 干预前的计算结果），不是真实参与布局的渲染值。这容易误导调试。
- 查
getComputedStyle(el).display可能返回"inline"，但margin-top已生效、width可设、父容器高度已塌陷——这些才是真实信号 - 不要依赖 DevTools 里显示的
display值判断布局行为，要看实际表现：上下 margin 是否起效？是否脱离文档流？能否设宽高？ - 想确认是否真被 float 接管，最可靠的方式是删掉
float，看行为是否立刻回退
清除浮动（clear）或设置 overflow: hidden 不会还原 display 行为
clear: both、::after { content: ""; display: table; clear: both; }、overflow: hidden 这些操作只影响父容器和兄弟元素的布局环境，对那个被 float 过的元素自身毫无作用。
- 加了
clear: left到浮动元素自己身上？没用——clear只约束元素自身与前面浮动元素的位置关系，不撤销 float -
overflow: hidden撑开父容器后，子元素依然保持块化渲染：仍可设宽高、上下 margin 有效、仍脱离文档流 - 唯一能真正“撤销” float 效果的，只有显式写
float: none -
display: flow-root是创建新 BFC 来包含浮动子项，但它不改变子项自身的float状态，也不恢复其display语义
最容易被忽略的一点：float 的覆盖是静默的——不报错、不警告、DevTools 也不标黄。你调了半天 display 却发现 margin-top 突然生效了，问题很可能根本不在 display，而在 float 早已接管了整个盒模型行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
