浮动用于脱离文档流的横向排列与文字环绕，需处理高度塌陷和清除浮动；inline-block保留文档流，适合组件布局但存在空白间隙；现代布局推荐Flexbox和Grid，简单场景可选inline-block，避免用浮动做整体页面布局。
浮动（float）和inline-block是CSS中两种常见的布局方式，虽然都能实现元素的横向排列，但它们在原理、行为和适用场景上有明显区别。理解这些差异有助于更合理地选择布局模式。
浮动（Float）的工作机制
浮动最初设计用于实现文字环绕图片的效果，后来被广泛用于多列布局。一个设置了float: left或float: right的元素会脱离标准文档流，向指定方向移动，直到碰到父容器或另一个浮动元素。
- 浮动元素会脱离正常流，可能影响后续元素的布局，常需清除浮动（clear）
- 父容器若只包含浮动子元素，会发生高度塌陷，需通过clearfix等方法修复
- 浮动更适合内容流式布局，如图文混排、传统多栏页面结构
inline-block 的布局特性
将元素设置为display: inline-block后，它既具备块级元素可以设置宽高的特点，又保留内联元素在同一行显示的特性。
- 元素保留在文档流中，不会导致父容器高度塌陷
- 元素之间存在默认的空白间隙，由HTML中的换行或空格引起，需特别处理
- 适合需要对齐控制的组件布局，如导航菜单、按钮组、卡片列表等
关键差异对比
- 浮动元素完全脱离正常流，inline-block仍在流中，影响方式不同
- 浮动可实现文字环绕效果，inline-block不能
- inline-block更容易控制垂直对齐（使用vertical-align），浮动则依赖外边距或定位调整
- 响应式处理上，inline-block可通过文本对齐控制整体分布，浮动依赖宽度和清浮动逻辑
现代布局中的选择建议
随着Flexbox和Grid的普及，浮动已不推荐用于整体页面布局。inline-block在简单横向排列场景中仍有价值，但也要注意空白问题。
立即学习“前端免费学习笔记（深入）”；
- 需要兼容老浏览器且布局简单时，可考虑inline-block
- 复杂对齐或动态内容排列，优先使用Flex布局
- 二维网格结构直接采用CSS Grid
- 避免用浮动构建整体页面结构，仅在特定内容环绕需求时使用
基本上就这些。浮动和inline-block各有用途，但在现代前端开发中，多数情况已有更优解。关键是根据实际需求选择合适的技术，保持代码清晰和可维护性。
