在网页设计中，尤其是在响应式设计中，元素的布局方式对于适应不同的屏幕尺寸和设备类型至关重要。Inline-block 和 float:left 都是用于设置元素布局的CSS属性，但它们的表现和用途有所不同。

1. 表现差异：
- inline-block：
- 元素水平排列，不占用新的行。
- 可以设置宽度和高度。
- 可以设置垂直对齐方式（例如，通过设置 vertical-align 属性）。
- 可以设置内边距和外边距。
- 元素之间会留有空白，这是由于HTML中的空格和换行符导致的。
- float:left：
- 元素向左浮动，直到它的边缘碰到包含它的元素的边缘。
- 可以设置宽度和高度。
- 通常与 clear 属性配合使用，以清除浮动。
- 不会产生空白，因为浮动元素会忽略周围的空格和换行符。

2. 用途差异：
- inline-block：
- 常用于创建水平排列的导航菜单、按钮等。
- 适合需要保持水平方向紧密排列的元素。
- 对于需要支持多行显示的元素，inline-block是更好的选择。
- float:left：
- 常用于创建浮动布局，例如图像旁边有文字说明。
- 适合需要将元素从文档的正常流中移出的情况。
- 对于需要清除浮动的元素，float:left 可能需要额外的 clearfix 技巧。

总结：
- inline-block 适合需要保持水平方向紧密排列且可能需要多行显示的元素。
- float:left 适合需要将元素从文档的正常流中移出，且通常不需要多行显示的情况。

在响应式设计中，选择使用 inline-block 还是 float:left 取决于具体的布局需求和设计目标。例如，如果需要一个元素在较小的屏幕上水平排列，但在较大的屏幕上垂直排列，那么可能需要结合使用媒体查询和 flexbox 布局来实现这种响应式布局。