display: inline-block 并非清除浮动，而是通过触发bfc使父容器包含浮动子元素高度；但会使父容器变为行内级框，导致margin: 0 auto失效、受字体影响、ie兼容性差等问题。
display: inline-block 不能真正“清除浮动”，它只是绕开了浮动——用一种不脱离文档流的方式实现并排布局，从而让父容器高度不再塌陷。
为什么给父容器设 display: inline-block 看似能“清浮动”
这不是清除，是规避。当父容器设为 display: inline-block 时，它会触发 BFC（块级格式化上下文），自动包含内部浮动子元素的高度，所以容器能正常撑开。但副作用明显：
- 父容器本身变成行内级框，
margin: 0 auto居中失效（除非同时设text-align: center在上层） - 父容器会响应文字对齐行为，比如受父级
font-size、line-height影响，可能产生意外垂直偏移 - IE6/7 下对块级元素支持不完整，需额外 hack（如
zoom: 1） - 若父容器宽度未显式设定，会收缩为内容最小宽度，而非 100% 占满
inline-block 替代浮动的典型写法与坑点
真正想用 inline-block 做布局，就别混用 float。直接让子项设 display: inline-block，父项保持 display: block 即可：
.container {
font-size: 0; /* 消除换行/空格产生的间隙 */
}
.item {
display: inline-block;
width: 200px;
height: 150px;
vertical-align: top; /* 防止基线对齐导致错位 */
font-size: 14px; /* 子项恢复字体大小 */
}
常见翻车点：
- 忘记重置子元素
font-size，导致文字不可见或尺寸异常 - 没设
vertical-align，多个inline-block元素因默认baseline对齐而上下错位 - 在 Flexbox / Grid 已普及的项目里硬套
inline-block，增加维护成本 - 用在需要响应式换行的场景时，
white-space: nowrap或overflow-x容易误配
和标准 clearfix 方案的关键差异
对比主流的伪元素 :after 清除法：
-
clearfix严格作用于浮动体系，兼容性好（加zoom: 1可覆盖 IE6/7），不改变父容器显示类型 -
inline-block方案本质是放弃浮动，改走行内布局路线，更适合轻量菜单、图标组等固定宽高场景 -
overflow: hidden虽简单，但会裁剪position: absolute溢出内容；inline-block不会，但会引入行内布局特有的对齐和间隙问题 - 现代项目中，
display: flex或display: grid是更干净的替代，inline-block主要价值只剩兼容 IE8–9 的遗留系统
真正容易被忽略的是：一旦用了 inline-block 布局，后续如果要加 hover 动画、transition 或媒体查询下的 flex 回退，就得同步处理两套对齐逻辑。不是不能做，而是得清楚——你选的不是“清除”，是“换条路走”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
