float元素脱离文档流，inline-block仍在行内格式化上下文中：前者导致父容器塌陷、后续元素上移，后者保留在流中、父容器自动撑高；vertical-align对float无效，仅对inline-block生效；现代布局应优先使用flex或grid。
float 元素脱离文档流，inline-block 仍在行内格式化上下文里
这是最根本的差异。给元素加 float: left 后，它就从正常文档流中“抽离”，后续兄弟元素会无视它的存在、直接上移填充位置；父容器若没做清除（如 ::after { clear: both } 或 overflow: hidden），高度就会塌陷成 0。而 display: inline-block 元素始终在文档流中，父容器能自然感知其尺寸，自动撑高——你不用写一行清除代码。
常见错误现象：
- 用
float做导航栏，下边的内容突然叠到菜单上去了 → 父容器塌陷 - 用
inline-block做卡片列表，卡片排得整齐但中间有 4px 空隙 → 是 HTML 换行符被渲染为空格，不是 bug
vertical-align 只对 inline-block 生效，对 float 完全无效
vertical-align 是行内格式化上下文（IFC）里的对齐机制，而 float 元素已脱离 IFC，所以无论你设 vertical-align: top 还是 middle，它都毫无反应。相反，inline-block 元素默认按 baseline 对齐，但你可以显式控制：
-
vertical-align: top：所有元素顶部对齐，行为稳定，推荐首选 -
vertical-align: text-bottom：底边对齐到父级font-size定义的 em-box 底边，比bottom更可靠 -
vertical-align: middle：慎用，它对齐的是行框中点，受字体、line-height、兄弟元素影响，响应式下容易漂移
高度不一致时，float 会“钻空”，inline-block 严格按行换行
两个 float: left 元素，如果第一个很高、第二个很矮，第三个元素可能卡进第一个右侧 + 第二个下方的空隙里，形成“俄罗斯方块”错位。而 inline-block 不会——它按整行计算可用宽度，只要当前行放不下下一个盒子，就整行换到下一行起始位置，不管每个盒子多高。
使用场景提醒：
- 做响应式图册或商品卡片网格，优先选
inline-block，换行逻辑可预期 - 需要文字环绕图片（比如新闻正文旁配图），才该用
float，这是它的原始语义 - 现代项目中，
float已基本被display: flex或display: grid替代，inline-block也只适合轻量、文本流语义明确的并排场景
inline-block 的间隙问题可控，float 的副作用更难调试
inline-block 元素间的空白，本质是 HTML 源码中的换行与空格被浏览器当作字符渲染了。解决方式明确：
- 父容器设
font-size: 0，子元素再单独设font-size: 16px - 删掉 HTML 中元素间的换行和空格（连写）
- 用注释
隔开元素
而 float 的问题更隐蔽：IE6 的重复文字 bug、清除方式选错导致阴影被裁剪、伪元素清除失效（比如父级也设了 font-size: 0，::after 内容可能不可见）。真正容易被忽略的是：很多人一边写 float: left，一边又试图用 vertical-align 或 font-size: 0 调整，结果两者互不买账——因为 float 已经让这些属性失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
