inline-block不清除浮动，而是弃用浮动——子元素设inline-block保留在文档流中，父容器自然不塌陷；但需处理空白间隙、vertical-align对齐及字体重置等问题。
为什么 inline-block 不是“清除浮动”，而是绕开它
用 display: inline-block 让父容器“看起来没塌陷”，根本不是在清除浮动，而是彻底弃用浮动——子元素不设 float，改走行内块路线，自然就不会脱离文档流，父容器高度也就不会丢失。这招对老项目兼容性友好，但容易误以为是“清浮动方案”，结果后续加 margin: 0 auto 居中失效、文字错位、IE6/7 行为异常，全是因为没意识到它已切换了布局范式。
inline-block 并排布局的实操要点
真正想用 inline-block 替代浮动，关键不是给父容器设，而是统一控制子项：
- 子元素统一设
display: inline-block，父容器保持display: block（别乱动父级 display） - 父容器加
font-size: 0消除 HTML 换行/空格产生的间隙；子元素再单独设回font-size - 必加
vertical-align: top（或middle、bottom），否则默认baseline对齐会导致上下错位 - 子元素宽度建议用固定值或百分比，避免因内容撑开导致换行不可控
常见翻车点和对应解法
实际写的时候，这几个坑几乎必踩：
-
font-size: 0忘了在子元素里重置 → 文字看不见，检查子元素是否漏了font-size - 没设
vertical-align→ 多个inline-block元素底部不对齐，尤其混有图片或文字时明显偏移 - 父容器宽度未显式声明（如
width: 100%）→ 它会收缩成内容最小宽度，不是你预期的满宽 - 在 Flexbox 已启用的项目里硬套
inline-block→ 后续媒体查询、hover 动画、transition 都得额外处理两套对齐逻辑
和主流 clearfix 方案的本质区别
对比伪元素 ::after + clear: both 的经典方案：
-
clearfix是在浮动体系内修漏洞，兼容性好（加zoom: 1可跑 IE6/7），不改变父容器显示类型 -
inline-block是放弃浮动、改走另一条路，副作用是引入行内布局特有的间隙、对齐、字体依赖问题 - 现代项目优先选
display: flex或display: grid；inline-block真正适用的只剩需要兼容 IE8–9 的遗留系统
最容易被忽略的是：一旦用了 inline-block 布局，后续任何涉及垂直居中、响应式换行、动画过渡的操作，都得同步考虑它的行内特性，而不是当成普通块级容器来处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
