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

1. **display: inline-block**
- `inline-block` 属性的元素会像内联元素一样显示，即它们不会换行，但可以设置宽度和高度。
- 每个 `inline-block` 元素会独占一行，除非设置了 `width` 属性。
- 元素之间的空白符（例如空格和换行符）会被忽略，这意味着你可以将多个 `inline-block` 元素放在同一行，而不会因为空白符而产生额外的空白。
- 你可以使用 `vertical-align` 属性来调整 `inline-block` 元素的垂直对齐方式。
- 在响应式设计中，`inline-block` 通常用于创建灵活的布局，因为它可以很好地适应不同的屏幕尺寸。

2. **float: left**
- `float: left` 属性的元素会向左浮动，直到其边缘碰到包含它的元素的边缘。
- 浮动元素会脱离文档的常规流，这意味着它不会影响其他非浮动元素的布局。
- 浮动元素的上方和周围可以放置 clearfix 元素，以清除浮动的影响。
- 多个 `float: left` 的元素会堆叠在一行上，直到到达包含元素的宽度限制，然后下一行的元素会继续浮动。
- 在响应式设计中，`float` 通常用于创建定宽度的布局，因为它不会自动调整大小以适应不同的屏幕尺寸。

总结来说，`inline-block` 适合创建灵活的布局，因为它可以很好地适应不同的屏幕尺寸，而 `float: left` 则适合创建定宽度的布局，但它需要额外的 clearfix 处理，并且不会自动调整大小以适应不同的设备。

在实际应用中，响应式设计通常会结合使用这两种布局方式。例如，你可能使用 `inline-block` 来布局主要的内容区域，同时使用 `float: left` 来布局侧边栏或其他固定宽度的元素。通过这种方式，你可以确保你的设计既具有适应性，又能够满足特定的布局需求。