浮动和 inline-block 均可实现元素并排，但机制不同：float 脱离文档流，内容环绕，需清除浮动防止父容器塌陷，无间隙问题；inline-block 不脱离文档流，像文字排列，受空格影响产生间隙，需特殊处理，父容器能正常包裹。inline-block 支持 text-align 和 vertical-align 对齐，适合简单布局如导航；float 曾用于多列布局，现多被 Flex 或 Grid 取代。
浮动（float）和 inline-block 是 CSS 中两种常见的布局方式，它们都能让元素并排显示，但工作原理和使用场景有明显区别。
1. 布局机制不同
float：元素脱离标准文档流，向左或向右浮动，其他内容会围绕它排列。浮动元素仍保留在文档流中影响布局，但可能造成父容器高度塌陷。
inline-block：元素表现为行内块级元素，不脱离文档流，可以设置宽高，多个元素在同一行显示，像文字一样排列，不会让内容环绕。
2. 对空白的处理方式不同
inline-block 元素之间的换行或空格会被浏览器解析成一个空格，导致元素间出现间隙。需要通过以下方式消除：
立即学习“前端免费学习笔记（深入）”；
- 将 HTML 标签写在同一行
- 设置父容器 font-size: 0，再单独设置子元素字体大小
- 使用负 margin 调整
float 没有这个问题，元素紧贴排列，不受空格影响。
3. 父容器高度处理不同
当子元素使用 float 时，父容器通常无法自动撑开，需要清除浮动（clear float），常用方法有：
- 添加额外清除元素（如 ）
- 使用伪类 ::after 配合 clear 属性
- 触发 BFC（如 overflow: hidden）
inline-block 不会导致父容器高度丢失，只要不设置 vertical-align 或处理好基线对齐，父容器能正常包裹子元素。
4. 排列与对齐控制不同
inline-block 可以通过 text-align 控制水平对齐（如居中、左对齐），vertical-align 控制垂直对齐（如 top、middle、bottom）。
float 主要靠方向（left/right）控制位置，垂直对齐能力弱，text-align 对其无效。
基本上就这些。inline-block 更适合简单的并排布局，比如导航菜单；float 曾经广泛用于多列布局，但现在更推荐用 Flex 或 Grid。虽然两者都能实现横向排列，但浮动的“副作用”更多，管理起来更复杂。
