Inline-block 和 float:left 是 CSS 中两种常见的布局属性，它们都可以用来布局页面元素，但它们的工作方式和适用场景有所不同。

1. **Inline-block**:
- `inline-block` 属性值是 `display` 属性的一个值，它将元素设置为内联块级元素。这意味着元素会像内联元素一样显示，但它可以拥有一个块级元素的宽度。
- 使用 `inline-block` 可以让你像排列内联元素一样排列块级元素，同时保持每个元素的宽度和高度。
- 每个 `inline-block` 元素之间会默认保留一个空白符的空间，这个空间可以通过 `font-size` 和 `letter-spacing` 属性来调整。
- `inline-block` 元素会水平对齐，但不会自动换行，除非它们到达父容器的边缘。

2. **Float**:
- `float` 属性是一个定位属性，它的值 `left` 表示元素向左浮动。
- 浮动元素会脱离文档的正常流，并尽量向左移动，直到它的外边缘碰到包含它的元素的边框或者另一个浮动元素的边框。
- 浮动元素会使得周围的元素（通常是文本）围绕在它周围，形成环绕效果。
- 多个浮动元素可以并排放置，但它们不会像 `inline-block` 那样自动对齐。
- 浮动元素会创建一个块级框，但它不会像 `inline-block` 那样保持其原始尺寸。

总结差异：
- 布局方式：`inline-block` 保持了元素的内联特性，而 `float` 则让元素脱离了文档流。
- 对齐方式：`inline-block` 元素会水平对齐，而 `float` 元素则需要通过其他方式（如 `clear` 属性）来控制对齐。
- 空白处理：`inline-block` 元素之间有默认的空白符空间，而 `float` 元素则没有。
- 环绕效果：`float` 元素会导致周围的元素环绕在其周围，而 `inline-block` 则不会。
- 尺寸保持：`inline-block` 元素保持其原始尺寸，而 `float` 元素则可能不会。

在实际应用中，选择使用 `inline-block` 还是 `float` 取决于你的具体布局需求。如果你需要元素保持其原始尺寸并且水平对齐，那么 `inline-block` 可能是更好的选择。如果你需要元素浮动并让周围的元素环绕，那么 `float` 可能是更好的选择。