`inline-block` 和 `float: left` 都是 CSS 布局中常用的属性，它们都可以用来使元素水平排列，但它们的工作方式和适用场景有所不同。

1. `inline-block`：
- `inline-block` 属性值是 `display` 属性的一个值，它将元素显示为 inline 级别，这意味着元素不会像 `block` 元素那样开始新的一行，而是和其他内联元素（如 `span`）一样在同一行显示。
- 使用 `inline-block` 可以使元素像 `block` 元素一样接受 `width` 和 `height` 属性，从而可以设置明确的宽度和高度。
- `inline-block` 元素可以与其他内联元素（如 `span`、`a`）和其它 `inline-block` 元素并排显示。
- `inline-block` 元素可以设置 `vertical-align` 属性来调整其在行中的垂直对齐方式。
- 由于 `inline-block` 元素是内联的，因此它们不会产生空白符（white space），这意味着在 HTML 源代码中元素之间的空格和换行符不会在页面布局中体现。

2. `float: left`：
- `float` 属性是一个定位属性，它的 `left` 值将元素向左浮动，使得元素离开正常的文档流，并允许周围的元素围绕它。
- 使用 `float: left` 的元素会从正常的文档流中移出，并与其他 `float` 元素一起排列。
- `float` 元素会形成一个新的层叠上下文（stacking context），这意味着它们会覆盖其后的内联内容。
- 浮动元素可以通过 `clear` 属性来清除，以防止其他元素与其并排显示。
- `float` 元素会创建一个块级容器，该容器可以通过 `width` 和 `height` 属性来设置大小。
- 浮动元素会保留原始的空白符，这意味着 HTML 源代码中的空格和换行符会在页面布局中体现。

总结来说，`inline-block` 更适用于需要保持内联水平排列的元素，且不需要创建新的层叠上下文的情况。而 `float: left` 则适用于需要从文档流中移出，并允许其他元素围绕其排列的情况。在优化页面布局时，选择使用 `inline-block` 还是 `float` 取决于具体的布局需求和元素的特性。