浮动脱离文档流导致父容器塌陷需清除，inline-block保留在流中但有空白间隙；前者支持文字环绕，后者依赖vertical-align对齐且更易控制多行布局。
浮动脱离文档流，inline-block 始终在流中
这是最根本的区别：设置 float: left 的元素会完全脱离标准文档流，后续块级元素会“无视”它的存在，从它原本占据的位置开始渲染；而 display: inline-block 元素仍在文档流内，只是表现为“可设宽高的行内元素”，父容器能自然感知其尺寸。
后果很直接：
- 浮动子元素会让父容器高度塌陷（常见于导航栏、卡片列表外层容器变高为 0）；必须用
::after伪类 +clear: both或触发 BFC（如overflow: hidden）来修复 - inline-block 不会导致塌陷，但 HTML 中的换行/空格会被解析为一个空白字符，造成约 4px 的水平间隙
- 文字环绕只对浮动生效（比如图片左浮，文字自动绕排），inline-block 完全不支持
对齐控制方式完全不同
text-align 和 vertical-align 对 inline-block 真正起作用；而 float 只响应 float: left/right，且 text-align 在父容器上对其无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要顶部对齐、底部对齐或基线居中时，用
vertical-align: top/middle/bottom配合 inline-block，比 float + margin/padding 更稳定 - 想让一组 inline-block 元素整体居中？给父容器加
text-align: center即可；float 则必须包裹一层再用margin: 0 auto或 Flex - float 在多行排列时容易错位——只要某一项高度不同，下一行就会卡在前一行较矮项的右侧，inline-block 则严格按行换行，不会穿插
空白间隙 vs 清除浮动：两类典型问题
两者都“能并排”，但各自有标志性副作用，处理方式也截然不同：
.container {
font-size: 0; /* 消除 inline-block 间隙的关键 */
}
.container > * {
font-size: 14px;
display: inline-block;
vertical-align: top;
}而浮动的典型修复写法是：
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 或更轻量的 */
.parent {
overflow: hidden; /* 触发 BFC，但慎用——可能裁剪子元素阴影或溢出内容 */
}注意：
- inline-block 的间隙根源是 HTML 解析规则，不是 CSS bug；紧贴写 HTML（
<div></div> <div></div>）也能解决，但可读性差 - float 的清除不是“可选项”，而是布局断裂的临界点——漏掉就可能整块内容错位、背景消失
现代项目里该选哪个？看场景，别硬套
如果你正在写新项目，优先考虑 display: flex 或 display: grid；但如果受限于兼容性（如需支持 IE9）或只是快速排几个按钮/标签，inline-block 是更安全的选择。
浮动现在只剩两个合理用途：
- 图文混排（
img左浮 + 文字环绕） - 极老系统维护（比如还在用 IE7 的内部后台）
inline-block 的坑集中在细节：间隙、基线对齐（默认是 baseline，常导致底部不对齐）、IE6/7 下需 hack（display: inline; zoom: 1）。这些都不是不能解，但得意识到——它们不是“写完就跑”，而是“写了就得验”。
