float 会让 inline 元素表现得像 block，但 display 值不变；它触发块化渲染行为，使元素可设宽高、上下 margin 生效、脱离文本流，而 computed style 中 display 仍为 inline。
float 会让 inline 元素表现得像 block，但 display 值不变
给 <span></span> 或 <a></a> 这类默认 display: inline 的元素加 float: left，它就能设宽高、上下 margin 生效、脱离文本流——看起来完全像块级元素。但查 computed style 时，display 值仍是 inline，没变。
这不是 CSS 把 display “改写”了，而是浮动触发了**块化渲染行为**：浏览器内部按块级方式布局它，但不修改你写的原始声明值。常见误操作是发现 margin-top 突然生效了，就去调 display: block，其实根本不用动 display，问题在 float 本身。
float 和 position: absolute 都会覆盖 display 声明
只要元素设置了 float: left、float: right 或 position: absolute（或 fixed），无论你之前写了 display: inline 还是 display: block，最终渲染行为都等效于 display: inline-block：可设宽高、可设四边 margin、不独占整行（除非宽度撑满）。
这种覆盖是隐式的、不可绕过的：
-
display: inline+float: left→ 渲染为块化，display计算值仍为inline，但行为无效 -
display: block+position: absolute→ 同样被覆盖，display计算值可能变为block，但实际布局不受它控制 -
display: none是唯一例外：一旦设了它，float和position全部失效
清除浮动（clear）不还原 display 行为
用 clear: both、::after { content: ""; display: table; clear: both; } 或 overflow: hidden 清除浮动，只是让父容器重新包含子元素、让后续内容回到正常流——但那个被 float 过的元素，依然保持块化渲染行为。
它还是能设宽高、上下 margin 还是生效、依然脱离文档流。想真正“撤销”浮动效果，必须显式写 float: none，否则所有清除手段都只影响周围环境，不影响它自己。
典型陷阱：
- 给浮动元素加
clear: left，以为这就取消了浮动 → 错，clear只对兄弟/父级布局起作用，对自身无效 - 用
overflow: hidden撑开父容器后，发现子元素还是独占一行 → 因为float没撤，它本来就是块化状态 - 误以为
display: flow-root能“重置”浮动 → 它只是创建新 BFC 来包含浮动子项，不改变子项的 float 状态
现代布局中 float 的 display 影响已成维护负担
float 触发的 display 隐式转换，在 flex 或 grid 布局里毫无意义。它只在老项目里频繁引发问题：文字环绕错乱、父容器高度塌陷、margin 合并异常、响应式断点失效。
真正需要关注的不是“float 怎么改 display”，而是：
- 看到布局错位，第一反应该查是否有未清除的
float，而不是反复调display - 遇到
inline元素突然能设高宽，别急着覆盖display，先看是不是被float或position: absolute悄悄接管了 - 用
display: inline-block实现并排时，注意它和float的本质区别：前者仍在文档流内，受空格/换行影响；后者已脱离流，靠文本环绕逻辑工作
float 对 display 的隐式干预，本质是历史包袱。它不声不响地改行为却不改值，最容易在调试时让人漏掉关键线索。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
