在网页设计中，`inline-block` 和 `float: left` 都是用来布局元素的常见方式，但它们的表现和用途有所不同。

1. **display: inline-block**
- `inline-block` 属性的元素会像内联元素（inline elements）一样排列，即它们不会换行，而是与周围的文本和元素同行显示。
- 同时，`inline-block` 元素可以设置宽度和高度，这意味着你可以精确地控制它们的尺寸。
- 每个 `inline-block` 元素之间会默认保留一个空白符的空间（尽管可以通过设置 `font-size: 0` 或 `letter-spacing: -0.31em` 来消除这个空白）。
- `inline-block` 元素可以接受 `vertical-align` 属性，这使得你可以调整它在垂直方向上的位置。
- 使用 `inline-block` 可以很容易地创建水平方向的元素布局，尤其是在结合 `width`、`height` 和 `margin` 属性时。

2. **float: left**
- `float: left` 属性的元素会向左浮动，直到它的边缘碰到包含它的元素的边缘或者遇到另一个浮动元素。
- 浮动元素会脱离文档的常规流，这意味着它不会影响后续元素的排列，除非它们也浮动了。
- 浮动元素可以通过 `clear` 属性来清除，以防止其他浮动元素紧邻它。
- 浮动元素可以堆叠，即当屏幕宽度不足以容纳所有浮动元素时，后面的元素会自动排列到前面元素的下方。
- `float` 通常结合 `width` 属性使用，以确定浮动元素的宽度。

总结来说，`inline-block` 更适合创建水平布局，并且可以精确控制元素的尺寸和位置，而 `float: left` 则更适合创建允许元素浮动、堆叠的布局，尤其是在需要创建类似于图像网格的布局时。