`inline-block` 和 `float: left` 都是 CSS 布局中用于控制元素排列的属性，但它们的工作原理和适用场景有所不同。

1. `inline-block`
- `inline-block` 属性值将元素设置为内联元素（inline），同时又具有块级元素（block）的行为。这意味着元素不会独占一行，而是与其他内联元素一起排列在同一行，除非它的宽度超过父元素的宽度。
- 使用 `inline-block` 可以轻松地让元素水平排列，同时保持行内布局的特点，如元素之间的空白符会被保留。
- 每个 `inline-block` 元素都可以设置宽度和高度，并且可以包含子元素。
- 你可以通过设置 `vertical-align` 属性来控制 `inline-block` 元素的垂直对齐方式。

2. `float: left`
- `float: left` 属性值将元素移出正常的文档流，并使其向左浮动。这意味着它不会占用页面上的常规空间，而是与其他浮动元素一起排列在页面上。
- 使用 `float: left` 可以创建多列布局，特别是与 `clear` 属性配合使用时。
- 浮动元素会形成一个新的排列层，其他非浮动元素会在这个层之上排列。
- 浮动元素可以设置宽度和高度，但它们不会自动形成块级容器，这意味着它们不能直接包含子元素。

总结差异：
- 布局方式：`inline-block` 保持内联布局，而 `float: left` 创建浮动布局。
- 文档流：`inline-block` 元素仍然在文档流中，而 `float: left` 元素被移出文档流。
- 子元素支持：`inline-block` 元素可以包含子元素，而 `float: left` 元素不能直接包含子元素。
- 对齐方式：`inline-block` 可以通过 `vertical-align` 属性调整垂直对齐，而 `float: left` 通常需要清除浮动（使用 `clear` 属性）来控制其下方元素的对齐。
- 适用场景：`inline-block` 适合需要保持行内布局但又需要设置宽度和高度的元素，而 `float: left` 适合创建多列布局或图片 Float 布局。