float 会让元素“块化”但 display 值不变，仍保持原始声明值；它触发块级渲染行为（可设宽高、上下 margin 生效、脱离文档流），但 computed style 中 display 不变；vertical-align 和 font-size: 0 对浮动元素失效，因浮动脱离行内格式化上下文；clear 仅影响周围布局，不撤销 float 效果，必须显式设 float: none 才能还原。
float 会让元素“块化”，但 display 值本身不变
它不会真的修改你写的 display 声明值，而是触发浏览器内部的块级渲染行为：无论原始是 display: inline 还是 display: inline-block，加了 float: left 或 float: right 后，该元素就能设 width/height、上下 margin 生效、脱离文档流——看起来完全像块级元素。
但查 DevTools 的 computed style，display 仍显示为 inline 或 inline-block。这不是 bug，是 CSS 渲染层的隐式行为：浮动强制启用块级盒模型（block formatting context），但不重写你的样式声明。
常见误操作是看到 margin-top 突然生效了，就去加 display: block ——其实根本没必要，问题在 float 本身。
float 和 position: absolute 都会覆盖 display 行为
只要设置了 float 或 position: absolute（含 fixed），display 的原始值就“失效”了：
-
display: inline+float: left→ 渲染等效于display: inline-block（可设宽高、四边 margin、不独占行） -
display: block+position: absolute→ 实际布局不受display控制，只看定位上下文 -
display: none是唯一例外：一旦设了它，float和position全部失效
为什么 float 后 vertical-align 和 font-size: 0 失效
这两个属性只对仍在行内格式化上下文（inline formatting context）中的元素起作用。而 float 会让元素脱离该上下文，生成独立的 BFC：
-
vertical-align对已浮动的元素完全无效——它不是“没生效”，而是压根不参与计算 -
font-size: 0在父级用于消除inline-block间隙，但浮动后元素已不在行框内，该技巧自动失效 - 如果同时写了
float和display: inline-block，等于用两套机制干同一件事，反而增加调试成本
清除浮动（clear）不还原 display 行为
clear: both、::after { content: ""; display: table; clear: both; } 或 overflow: hidden 这些手段，只影响浮动元素周围的布局环境：
- 它们能让父容器重新包含子元素、让后续内容回到正常流
- 但那个被
float过的元素，依然保持块化渲染行为：仍能设宽高、上下margin仍生效、依然脱离文档流 - 想真正撤销浮动效果，必须显式写
float: none；其他任何清除方式都不影响它自身
最容易被忽略的是：清除浮动 ≠ 撤销浮动。很多人以为加了 clear 就“恢复原状”，其实只是把周围修好了，那个元素还是浮着的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
