inline-block可彻底避免浮动导致的父容器高度塌陷，自动撑高、垂直对齐可靠、换行规则清晰，间隙问题易解决，比float更符合文本流语义。
父容器高度塌陷问题根本不存在
用 float 做列表，父容器经常“缩成一条线”，后续内容上移盖住列表——这是因为浮动元素完全脱离文档流，父容器感知不到子元素高度。你不得不加 ::after { content: ""; display: table; clear: both; } 或 overflow: hidden 来 hack。而 display: inline-block 元素始终在文档流中，父容器自动撑开高度，一行 CSS 就能省掉所有清除浮动的胶水代码。
vertical-align 比 float 的垂直对齐靠谱得多
想让一组卡片顶部对齐？vertical-align: top 一行搞定。底部对齐？vertical-align: bottom。中间对齐？vertical-align: middle。这些行为稳定、可预测，且不依赖父容器高度或兄弟元素状态。而 float 元素默认紧贴容器顶部，若要底部对齐，得靠 margin-top 手动算差值、或套多一层 position: relative + bottom，稍一改尺寸就崩。
高度不一致时不会“俄罗斯方块”错位
当列表项高度参差不齐：float 会触发经典卡位问题——第一项很高，第二项很矮，第三项就会试图“钻进”第一项右侧和第二项下方之间的空隙，造成视觉断层；inline-block 则严格按文本流换行：一行放不下就整行换，不管每个盒子多高，排列干净利落。响应式下 viewport 变宽变窄时，换行行为也更可预期。
间隙问题虽有，但比浮动副作用轻得多
inline-block 元素间的 4px 左右空白，本质是 HTML 换行符被浏览器当作空格渲染所致，不是 bug。解决方式明确且低侵入：
- 父元素设
font-size: 0，子元素再单独设字体大小 - HTML 中删掉元素间的换行与空格（
<div></div> <div></div>连写） - 用注释
<!-- -->隔开元素
float 的塌陷、环绕、IE6 重复文字、清除逻辑耦合等，都是更深层、更难调试的副作用。真正容易被忽略的是：很多人把 inline-block 当作“float 的平替”去用，却没意识到它天然适合文本流语义场景——比如导航菜单、图册列表、卡片网格。一旦需要复杂对齐或跨行拉伸，该换 Flexbox 就换，别硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
