float 不会改变 inline-block 元素的 display 计算值，但使其脱离文档流、触发 bfc、失效 vertical-align 和 font-size: 0 控制；现代布局应优先使用 flex 或 grid。
float 会让 inline-block 元素脱离文档流，但 display 值不变
给一个 display: inline-block 的元素加 float: left，它依然保持 display: inline-block 的计算值（浏览器 devtools 里能看到），但行为上会完全脱离正常文档流：后续兄弟元素会“上移”填补它原来的位置，父容器若无清除机制就会高度塌陷。
这和纯 inline-block 的行为截然不同——后者仍在行内格式化上下文中，受空格/换行影响，且不触发 BFC；而一旦加了 float，它就生成独立的 BFC，能撑开父容器（如果父容器没被清除干扰），也能避免 margin 合并。
-
float不会改变inline-block元素的 display 计算值，但会覆盖其行内布局语义 - 浮动后的
inline-block元素不再受父级font-size: 0控制（因已脱离行框） - vertical-align 对浮动后的元素失效——它只对仍在行内格式化上下文中的元素起作用
为什么有人同时写 float 和 display: inline-block？
早期为兼容 IE6/7，开发者常写 display: inline-block; *display: inline; *zoom: 1; 模拟块级行为，再加 float: left 强制并排、规避 IE 的 inline-block 渲染 bug。现代浏览器中这种组合基本没必要，反而容易引发混乱。
真正需要的是明确目的：inline-block 用于可控的、不脱离流的并排；float 用于文本环绕或老式栅格（如多栏新闻列表）。混用两者，等于用两套机制干同一件事，徒增调试成本。
- 若目标是让多个元素严格左对齐且不换行，优先用
display: flex - 若必须支持 IE8，用
float单独即可，inline-block反而增加空隙风险 - 若已用
float，就别再依赖vertical-align或font-size: 0调整对齐——它们此时不起作用
float + inline-block 常见视觉陷阱
最典型的是“高度参差不齐”：两个 float: left 的 inline-block 元素，若内容高度不同，第二个会卡在第一个的底部右侧，而不是顶部对齐——这是浮动本身的定位逻辑，和 inline-block 无关。
另一个坑是父容器清除方式选错：overflow: hidden 能撑高，但可能意外裁剪阴影或下拉菜单；::after { content: ""; display: table; clear: both; } 更安全，但要注意伪元素是否被 inline-block 的父级继承影响（比如父级也设了 font-size: 0，伪元素内容可能不可见）。
- 浮动元素之间的垂直对齐靠的是“浮动锚点”，不是
vertical-align -
clear只作用于后续兄弟元素，对已浮动的inline-block元素本身无效 - 想让它回归文档流？必须显式写
float: none，仅清除父级影响不够
现代替代方案比 float + inline-block 更可靠
flex 布局能天然解决对齐、等高、响应式换行等问题；grid 更适合二维布局。而 float + inline-block 组合既不能提供 flex 的 align-items，也不具备 grid 的区域划分能力，还自带清除负担。
唯一保留 float 的合理场景只剩文字环绕图片——这时图片本身是替换元素，默认 inline，加 float 正好触发块化渲染，周围文字自动重排。其他所有布局需求，都该优先考虑 display: flex 或 display: grid。
- flex 容器里的子项无需
float，也无需担心空隙或基线对齐问题 - 使用
display: flow-root替代overflow: hidden清除浮动，语义更清晰且无裁剪风险 - 老项目维护时，看到
float和inline-block并存，第一反应不是调样式，而是查是否真需要浮动——大概率可以删掉
span 加了 display: inline-block 和 float: left，它的尺寸变化根源仍是浮动带来的块化渲染，不是 display 属性本身。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
