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

1. 显示方式不同：
- `inline-block` 元素默认具有 `inline` 元素的水平布局特性，即它们在一行上显示，直到行满为止，然后换行。同时，它们也支持 `block` 元素的属性，比如可以设置宽度和高度。
- `float: left` 则是将元素移出正常的文档流，并使其向左浮动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。

2. 定位方式不同：
- `inline-block` 元素可以看作是 `inline` 和 `block` 的混合体，它们可以与其他 `inline` 元素（如文字）并排显示，并且可以设置宽度和高度。
- `float: left` 元素会脱离文档流，这意味着它不会占用原始的位置，而是会移动到左边，直到碰到包含框或另一个浮动元素的边框为止。

3. 影响的其他元素不同：
- `inline-block` 元素不会影响其周围元素的布局，除非它们占据了超过一行。
- `float: left` 元素会将其周围的元素（通常是块级元素）推到浮动元素的下方，直到浮动元素的底部或包含框的底部为止。

4. 清除浮动的方式不同：
- 对于 `inline-block` 元素，如果需要清除浮动，通常需要将其转换为 `block` 元素，或者使用 `display: inline-block; vertical-align: top;` 来调整元素的位置。
- 对于 `float: left` 元素，可以通过给父元素添加 `clear: both;` 属性来清除浮动。

5. 支持性和兼容性不同：
- `inline-block` 在现代浏览器中得到了广泛的支持，但在一些旧版本浏览器中可能需要前缀（如 `-webkit-` 或 `-moz-`）。
- `float` 属性是一个非常古老的属性，几乎所有的浏览器都支持它。

在实际应用中，选择使用 `inline-block` 还是 `float` 取决于具体的布局需求。例如，如果需要创建一个水平排列的导航栏，并且每个导航项可以设置宽度和高度，那么 `inline-block` 可能是更好的选择。如果需要创建一个浮动图像网格，其中图像可以水平排列，并且不希望它们影响周围的文本，那么 `float: left` 可能是更好的选择。