inline-block通过使元素并排排列且保留宽高，替代float实现布局，避免高度塌陷，无需清除浮动，配合font-size:0等方法可消除间隙，支持vertical-align对齐，相比float更易管理，适用于兼容老浏览器的轻量级场景。
在CSS布局中，清除浮动（clear float）是一个常见的需求。传统方法多用 float 配合 clear 属性实现，但容易引发父容器高度塌陷等问题。而使用 display: inline-block 可以避免浮动带来的副作用，同时实现类似布局效果，是一种更简洁、可控的替代方案。
inline-block 如何替代 float 实现布局
inline-block 让元素既像行内元素一样并排排列，又保留块级元素的宽高设置能力。这使得它非常适合用于创建水平排列的模块，比如导航菜单、图片列表等，无需依赖浮动。
常见使用方式：
- 将多个块状元素设置为
display: inline-block，它们会在一行内排列 - 父容器无需额外清除浮动，不会出现高度塌陷
- 可直接控制每个子元素的垂直对齐方式（如
vertical-align: top）
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
font-size: 0; /* 消除inline-block间的默认间隙 */
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: #007acc;
margin: 5px;
vertical-align: top;
font-size: 16px; /* 恢复字体大小 */
}
解决 inline-block 的空白间隙问题
使用 inline-block 时，HTML 中元素之间的换行或空格会被渲染成一个空白符，导致意料之外的间距。以下是几种有效解决方法：
- 将所有子元素写在同一行：
- 在父元素上设置
font-size: 0，子元素再重新设置字体大小 - 使用 HTML 注释消除空格：
- 通过负的
margin调整（如margin-right: -4px）
对比 float：为何 inline-block 更易管理
相比浮动布局，inline-block 在以下方面更具优势：
- 不脱离文档流，父容器能自然包裹内容，无需触发 BFC 或添加伪元素清除浮动
- 支持
vertical-align控制对齐，灵活性更高 - 调试更直观，元素位置不易错乱
- 与文本行为一致，适合响应式设计中的微调
虽然现代布局更多使用 Flexbox 或 Grid，但在兼容老浏览器或轻量场景下，inline-block 仍是替代 float 的实用选择。
基本上就这些。
