浮动元素脱离文档流，适用于传统多列布局，但需处理清除浮动；2. inline-block 不脱离文档流，适合小型并排组件，需注意间隙问题；3. 现代布局推荐使用 Flexbox 或 Grid，简单并排优先选择 inline-block。
浮动元素（float）和 inline-block 都可以让元素并排显示，但它们的工作机制和适用场景不同。选择哪种方式，取决于布局需求、兼容性以及后续维护的便利性。
浮动元素（float）的特点与使用场景
float 最初设计用于实现文字环绕图片的效果，后来被广泛用于多列布局。
- 脱离标准文档流，向左或向右移动，直到碰到容器边缘或其他浮动元素
- 父容器可能无法自动包含浮动子元素，需要清除浮动（clear float）来防止塌陷
- 适合传统多列布局，如侧边栏+主内容区
- 对垂直对齐控制较弱，行内间距受空白字符影响小
常见用法：
.box { float: left; width: 200px; }inline-block 的特点与使用场景
inline-block 让元素像行内元素一样排列，同时保留块级元素的宽高特性。
立即学习“前端免费学习笔记（深入）”；
- 不脱离文档流，元素在一行内从左到右排列，换行符或空格会产生间隙
- 父容器能自然包裹内容，无需额外清除
- 支持 vertical-align 控制垂直对齐方式（如顶部、底部、居中对齐）
- 适合导航菜单、按钮组、标签等小型并排组件
注意：HTML 中的换行或空格会导致元素间出现约 4px 的间隙，可通过以下方式消除：
/* 方法一：父元素设置 font-size: 0 */.container { font-size: 0; }
.container span { font-size: 14px; display: inline-block; }
/* 方法二：HTML 中元素紧贴书写 */
AB
如何选择？看实际需求
- 要做整体页面结构（如两栏、三栏布局），且兼容老浏览器，可考虑 float + clear
- 若只是让几个小元素并排（如导航项、图标+文字），inline-block 更直观易控
- 现代开发更推荐使用 Flexbox 或 Grid 布局替代两者，更加灵活强大
- 如果项目不能使用 Flex，inline-block 通常比 float 更少副作用
基本上就这些。float 和 inline-block 各有用途，但现在多数情况下，优先考虑 inline-block 处理简单并排，复杂布局交给 Flex。不复杂但容易忽略的是细节处理，比如浮动清空和间隙问题。
