在响应式设计中，使用`inline-block`和`float: left`来布局元素是两种常见的方法。它们在布局上的表现有一些显著的差异，特别是在不同的屏幕尺寸下。

1. **display: inline-block**
- `inline-block`属性的元素会按照文本的布局方式排列，即在同一行中从左到右排列。
- 每个`inline-block`元素都会独占一行，除非它们的宽度总和超过父元素的宽度，这时它们会自动换行。
- 你可以使用`vertical-align`属性来调整`inline-block`元素的垂直对齐方式。
- 你可以使用`width`和`height`属性来设置`inline-block`元素的宽度和高度。
- 当屏幕尺寸变小时，`inline-block`元素会自动调整宽度以适应内容，但不会影响其他元素的排列方式。

2. **float: left**
- `float: left`属性的元素会浮动到左边，直到到达父元素的边缘，然后后面的元素会围绕在它周围。
- 你可以使用`clear`属性来清除浮动的影响。
- 你可以使用`width`属性来设置浮动元素的宽度，但如果不设置，它将尽可能宽。
- 当屏幕尺寸变小时，`float: left`元素的宽度不会自动调整，除非你显式地设置了`width`属性。
- 浮动元素会脱离正常的文档流，可能会导致父元素的高度塌陷。

总结来说，`inline-block`在响应式设计中通常更灵活，因为元素会根据内容自适应宽度，而`float: left`则需要显式地设置宽度，并且在小屏幕上可能需要额外的清除浮动的方法来避免布局问题。此外，`inline-block`元素之间的间隙会比浮动元素之间的间隙小，因为`inline-block`元素会继承文本的排版特性。