Inline-block 和 float: left 是 CSS 中两种常见的布局属性，它们都可以用来创建块级元素的水平排列。然而，它们的工作原理和适用场景有所不同。

1. **display: inline-block**
- `display: inline-block` 属性将元素显示为内联元素，但同时具有块级元素的行为。这意味着元素的内容会作为一行显示，而元素本身可以设置宽度和高度。
- 使用 `inline-block` 可以很容易地让元素保持在其父元素中水平对齐，同时每个元素都可以设置自己的宽度和高度。
- 元素之间会自动添加间隙，这是由于它们是内联元素的特性。这个间隙可以通过设置 `font-size` 或 `letter-spacing` 来调整。
- 通常，`inline-block` 元素会继承其父元素的宽度，除非显式地设置了宽度。

2. **float: left**
- `float: left` 属性将元素移出正常的文档流，并将其放置在其父元素的左边。
- 使用 `float` 可以创建浮动布局，常用于图像旁边环绕文字的效果。
- 浮动元素的上方和周围可以放置其他元素，这些元素会“绕过”浮动元素。
- 多个浮动元素会形成一个连续的浮动区域，直到遇到 clear 指令或父元素的边界。
- 浮动元素会忽略内联水平方向上的外边距（margin）。

总结差异：
- 行为：`inline-block` 元素仍然在正常的文档流中，而 `float` 元素则被移出文档流。
- 对齐方式：`inline-block` 元素可以通过设置 `text-align` 属性来控制对其，而 `float` 元素则需要通过其他方式（如 clearfix 技巧）来控制对其。
- 元素间距：`inline-block` 元素之间会有默认的间距，而 `float` 元素之间则没有。
- 浮动特性：`float` 元素会形成浮动区域，而 `inline-block` 元素则不会。
- 应用场景：`inline-block` 适合于需要保持元素水平对齐且每个元素都有固定宽高的布局，而 `float` 则适合于创建类似于杂志布局的效果，或者需要环绕文本的布局。

在实际使用中，通常会根据具体的布局需求来选择使用 `inline-block` 还是 `float`。例如，如果需要创建一个水平排列的导航栏，每个链接都有固定的宽度和高度，那么 `inline-block` 可能是更好的选择。如果需要创建一个多列布局，其中某些列的内容需要环绕图片，那么 `float` 可能是更合适的选择。