float不会修改display声明值但触发块化渲染，使inline元素可设宽高和上下margin，computed值仍为inline；清除浮动仅影响周边环境，撤销需显式设float:none。
float 不会修改元素的 display 声明值，但会强制触发块化渲染行为——无论你写的是 display: inline 还是 display: block，只要设置了 float: left 或 float: right，该元素就按块级方式参与布局。
computed style 中 display 仍是 inline，为什么宽高和 margin 能生效？
这是最常见的认知偏差：看到 span 加了 float: left 后能设 width、height、margin-top，就以为它“变成了 block”。其实不是——浏览器内部启动了**块化渲染（blockification）**，但 DOM 的 display 计算值仍为原始值（比如 inline）。你可以用 getComputedStyle(el).display 验证，结果还是 "inline"。
-
float和position: absolute是少数几个能覆盖display布局语义的 CSS 属性 - 这种覆盖不可逆：清除浮动（如
clear: both或::after伪元素）只影响父容器和后续兄弟元素，不还原该元素自身的渲染行为 - 真正撤销块化行为，必须显式写
float: none
float + inline 元素 vs float + block 元素，实际表现有区别吗？
没有本质区别。一旦设置了 float，两者都获得以下能力：
- 可设置
width/height - 四边
margin全部生效（包括margin-top和margin-bottom） - 脱离正常文档流，不再撑开父容器高度
- 后续内联内容（如文字）会环绕它
唯一的差异来自初始盒模型：比如 span 默认无 padding、margin，而 div 默认有 margin（用户代理样式），但这与 float 无关，是原始样式带来的。
为什么 overflow: hidden 能“包裹”浮动子元素，却不影响子元素的 display 行为？
overflow: hidden 触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素——但它对子元素自身毫无作用。那个被 float 过的子元素依然：
- 保持脱离文档流
- 继续响应
width/height设置 - 其
display计算值不变
换句话说：overflow: hidden 解决的是父容器塌陷问题，不是子元素“还原 display”的开关。想让它回归正常流，只能删掉或覆盖 float 声明。
最易忽略的一点：display: none 是唯一能彻底压制 float 和 position 的值——一旦设了它，浮动和定位全部失效，元素完全退出渲染树。其他所有清除手段，都只是在周围环境上打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
