Inline-block 和 float:left 都是 CSS 中用来布局元素的属性，但它们的表现和用途有所不同。

1. **display: inline-block**
- `display: inline-block` 属性将元素显示为inline，即元素不会独占一行，但可以设置宽度和高度。
- 每个 `inline-block` 元素都会创建一个块级格式化上下文（BFC），这意味着它不会与周围的 `inline` 元素共享行框，而是会创建自己的行框。
- 你可以通过设置 `vertical-align` 属性来调整 `inline-block` 元素的垂直对齐方式。
- 使用 `inline-block` 通常可以更好地控制元素的位置和大小，因为它可以接受 `width` 和 `height` 属性。

2. **float: left**
- `float: left` 属性将元素移出正常的文档流，并将其放置在父元素的左边。
- 浮动的元素会创建一个浮动上下文，其他 `float` 元素会围绕它排列。
- 浮动元素会对其周围的 `inline` 元素产生影响，可能导致文本或其他元素环绕在它周围。
- 浮动元素可以通过 `clear` 属性来清除，以防止其他浮动元素靠近它。

总结来说，`inline-block` 更适用于需要保持 `inline` 水平排列，但同时需要设置宽度和高度的情况。而 `float: left` 则常用于创建布局中的浮动效果，比如创建侧边栏或者多列布局。

在实际使用中，响应式设计可能会结合使用这两种方法。例如，在一个网格布局中，你可能使用 `float: left` 来创建多列布局，然后结合媒体查询来调整列的宽度，以适应不同的屏幕尺寸。而在一些需要精确控制元素大小和位置的场合，`inline-block` 可能更合适。