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

1. **Inline-block**:
- 当您将 `display` 属性设置为 `inline-block` 时，元素会以行的形式排列，就像 `inline` 元素一样，但是您可以像 `block` 元素一样为它们设置宽度和高度。
- 使用 `inline-block` 可以使元素水平排列，同时保持行内元素的特点，即元素之间会自动换行，直到到达容器的边缘。
- 每个 `inline-block` 元素都会独占一行，除非它们的宽度小于容器的宽度。
- 您可以使用 `vertical-align` 属性来控制 `inline-block` 元素的垂直对齐方式。

2. **Float**:
- 当您将 `float` 属性设置为 `left` 时，元素会向左浮动，直到它的边缘碰到包含框的边缘或者另一个浮动元素的边缘。
- 浮动元素会脱离文档的常规流，这意味着它不会影响后续元素的布局，除非这些元素也浮动。
- 浮动元素会形成一个新的排列层，其他非浮动元素会在这个浮动元素下方排列。
- 您可以使用 `clear` 属性来控制其他元素如何围绕浮动元素排列。

总结来说，`inline-block` 适合于需要保持行内布局，但又需要控制每个元素宽度和高度的场景，而 `float: left` 则适合于需要将元素移出常规文档流，使其与其他元素并排显示的场景。

在实际使用中，`inline-block` 通常用于创建导航菜单、按钮栏等，而 `float: left` 则常用于图像浮动、多列布局等。