Inline-block 和 float:left 都是 CSS 中用于布局的属性，但它们实现布局的方式和适用场景有所不同。

1. **Inline-block**:
- 属性 `display: inline-block` 将元素显示为内联元素，但同时它也具有块级元素的属性，即它可以在行内占有空间，并且可以设置宽度和高度。
- 使用 `inline-block` 可以使元素水平排列，同时每个元素之间会保留一个空白符的空间，这个空间可以通过 `letter-spacing` 或 `white-space` 属性来调整。
- 元素会按照文本的顺序从左到右排列，除非设置了 `direction` 属性。
- 通常，`inline-block` 元素不会像块级元素那样自动换行，除非它们到达了容器的边缘或者设置了 `overflow` 属性。

2. **Float**:
- 属性 `float: left` 将元素移出正常的文档流，并使其向左浮动。
- 浮动元素会按照它们在代码中的顺序从上到下排列，直到容器的边缘或者遇到一个非浮动元素（称为“浮动破坏者”）。
- 浮动元素会对其周围的文本和内联元素产生影响，这些元素会环绕在浮动元素周围。
- 浮动元素可以通过 `clear` 属性来清除，以防止其他浮动元素紧跟其后。
- 浮动元素可以设置宽度，但如果不设置，它们将根据其内容自动调整宽度。

总结来说，`inline-block` 适合于希望元素保持内联水平排列，同时又需要设置宽度和高度的场景。而 `float: left` 则适合于需要让元素浮动到页面的一侧，或者创建类似于布局网格的场景。

在优化页面布局时，选择使用 `inline-block` 还是 `float` 取决于具体的需求和设计目标。如果需要元素水平排列且不希望影响文档流，则使用 `inline-block`；如果需要创建浮动的布局，或者希望元素环绕在其他元素周围，则使用 `float: left`。