float 会使 inline 元素呈现 block-level 行为：可设宽高、上下 margin 生效、脱离文本流，本质是触发块化渲染而非改变 display 值；清除浮动（如 clear 或 overflow）仅恢复布局环境，不撤销 float 效果，须设 float: none 才真正取消。
float 会让 inline 元素变成 block-level 行为
只要给一个 span 或 a 这类默认 display: inline 的元素加了 float: left（或 right），它就不再受行内布局规则约束：能设宽高、能上下 margin 生效、会脱离文本流——本质上被浏览器当作 display: block 处理，尽管 computed style 里 display 值可能还是 inline。
这不是 CSS 规范“转换”了 display 值，而是浮动触发了块化渲染行为。常见错误是以为 float 只影响位置，结果发现原本紧挨着的文字突然换行、margin 不生效又回头去调 display，其实问题根子在浮动本身。
- 所有浮动元素都会生成 BFC（块级格式化上下文），这是它能撑开父容器、避免 margin 合并的根本原因
-
float对display: inline-block或table-cell元素也有效，但不会改变它们的 display 计算值，行为变化不如 inline 元素明显 - 现代布局中尽量避免依赖 float 实现排版，
flex或grid更可控；但维护老项目时，看到文字环绕失效、高度塌陷，第一反应该查是不是有未清除的float
清除浮动后 display 恢复原状？不，只是布局回归正常
用 clear: both、::after { content: ""; display: table; clear: both; } 或 overflow: hidden 清除浮动，并不会把元素的 display 值“还原”成 inline——它只是让父容器重新包含浮动子元素、让后续内容回到正常文档流。那个被 float 过的 span 依然保持它的块化渲染行为，只是周围环境不再错乱。
典型误操作：给浮动元素加了 clear，以为这就“取消浮动”，结果发现它还是独占一行、宽高可设——因为 clear 不影响自身浮动状态，只影响兄弟/父级布局。
-
clear属性只对块级元素生效，对 inline 元素无效（除非它已被 float 块化） - 想真正“撤销”浮动效果，必须显式设置
float: none，否则即使清除了父级影响，该元素仍参与浮动布局计算 - 使用
display: flow-root替代overflow: hidden清除浮动更语义化，且不会意外触发滚动条或裁剪
和 display: inline-block 的关键区别在哪
float 和 display: inline-block 都能让元素并排，但底层机制完全不同：前者靠脱离文档流 + 文本环绕，后者仍在行内格式化上下文中，受字体大小、换行符空格影响。
比如两个 span 设 display: inline-block，中间有换行或空格就会出现间隙；而同样两个 span 设 float: left，间隙消失，但父容器若没清除浮动就会塌陷——这是最常踩的坑。
-
inline-block元素的垂直对齐默认是baseline，容易因内容高度不同错位；float元素默认顶部对齐，更稳定 -
float元素无法用vertical-align控制对齐方式，inline-block可以 - 响应式场景下，
float在宽度不足时会自动换行堆叠，inline-block则可能溢出容器（除非配合white-space: nowrap）
现代替代方案里哪些属性会绕过 float 的副作用
如果你只是想左对齐+自适应宽度+不塌陷父容器，float 已不是首选。Flexbox 中 display: flex + flex-direction: row 直接解决；Grid 中 display: grid + grid-template-columns: auto auto 更灵活。
这些方案不触发 BFC（除非显式设），不脱离文档流，不干扰文本环绕逻辑——也就是说，它们不会让一个 span “变块”，也不会导致父容器高度丢失。唯一要注意的是兼容性：flex 在 IE10+ 支持尚可，grid 在 IE 中基本不可用。
- IE11 下
flex的flex-wrap有 bug，必要时仍需 fallback 到float -
display: contents能让父元素“消失”，子元素直接参与外层布局，但不支持 IE，且会让 aria 树断裂，慎用 - 如果必须用
float（比如图文混排中的图片环绕），记得始终配width或max-width，否则在窄屏下可能撑爆容器
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
