float不会修改display声明值但强制块化渲染，使inline元素可设宽高和上下margin，computed值仍为inline；清除浮动仅影响周边环境，撤销需显式设float:none。
因为 float 会强制将元素的 display 类型重置为 block（或等效块级行为），使其脱离标准流并获得块级盒子的尺寸控制能力。
float 会覆盖 display 值，无视原始类型
无论原始是 <span></span>、<a></a> 还是 <em></em>，只要设置了 float: left 或 float: right，浏览器就不再按行内盒模型解析它：
- 原始
display: inline被忽略，实际渲染时等效于display: block - 该元素立即获得设置
width、height、margin、padding的能力 - 即使未显式声明
display，CSS 规范明确指出：“浮动元素被视作块级元素（block-level）”，display特性被丢弃
不是变成 inline-block，也不是触发 haslayout
常见误解是“float 让元素变成 inline-block”或“IE 下靠 haslayout 实现”。这两种说法都不准确：
-
inline-block仍属行内上下文，会受换行符/空格影响；而浮动元素完全脱离文档流，行为更接近block -
haslayout是 IE6/7 的私有机制，现代浏览器无此概念；且规范层面的解释与引擎实现无关 - W3C CSS2.1 明确写明：
float非none时，“对象将被视作块对象（block-level）”，这是跨浏览器一致的行为
宽高计算仍遵循盒模型，但需注意塌陷风险
虽然能设宽高，但浮动后的尺寸逻辑和普通块级元素略有差异：
立即学习“前端免费学习笔记（深入）”；
- 未设
width时，默认收缩至内容宽度（哪怕原来是<div>） <li>高度由内部内容撑开；若子元素也浮动且未清除，父容器高度可能坍缩为 <code>0 -
box-sizing依然生效：content-box下width不含padding和border，border-box则包含 - 浮动元素之间不会发生外边距合并（margin collapse），但和标准流元素之间仍可能
- 语义混乱：用
float实现布局本就不符合其设计初衷（文字环绕） - 清除浮动成本高，容易引发父容器塌陷、兄弟元素错位等隐性问题
- Flexbox 和 Grid 已成为主流布局方案，
display: inline-flex或display: grid更可控、可读性更强 - 若仅需让行内元素可设宽高，直接改用
display: inline-block或display: inline-flex更清晰
现代开发中应优先避免依赖 float 控制宽高
虽然技术上可行，但用 float 给行内元素“强行块化”属于历史遗留技巧：
真正容易被忽略的是：这个行为没有例外——哪怕元素原本是 display: none，只要 float 不是 none，它就不会渲染；但一旦可见，就一定是块级尺寸行为。别在调试时误以为“某个 span 没生效”，先检查是否被 display: none 或父级隐藏覆盖了。
