在网页设计中，尤其是在响应式设计中，元素的布局方式对于适应不同的屏幕尺寸和设备类型至关重要。Inline-block 和 float:left 是两种常见的布局属性，它们在布局元素时表现出了不同的行为。

1. **Inline-block**:
- 元素水平排列，且元素之间会有间隙（通常是字体大小的一小部分）。
- 元素不会像块级元素那样自动换行，除非到达屏幕边缘或遇到一个需要换行的元素。
- 可以通过设置 `width` 和 `height` 属性来控制元素的大小。
- 支持 margin 和 padding，但 vertical margin（上下外边距）在相邻元素之间可能会发生折叠（collapse）。
- 可以设置 `vertical-align` 属性来调整元素的垂直对齐方式。
- 在响应式设计中，Inline-block 元素可以通过媒体查询调整 `width` 或 `margin` 来适应不同的屏幕尺寸。

2. **Float: left**:
- 元素向左浮动，直到其外边缘碰到包含框或另一个浮动元素的边缘。
- 浮动元素会脱离文档的正常流，因此不会影响后续元素的布局。
- 可以通过清除浮动（clearfix）来解决浮动元素引起的父元素高度塌陷问题。
- 浮动元素可以设置 `width`，但是如果不设置，它将根据其内容自适应宽度。
- 浮动元素的 `margin` 不会与其他浮动元素的 `margin` 发生折叠。
- 在响应式设计中，可以通过媒体查询调整 `width` 或 `margin` 来适应不同的屏幕尺寸，但需要清除浮动以保持布局的完整性。

总结来说，Inline-block 适合于水平排列的元素，而 float:left 则适合于需要独立布局的元素。在响应式设计中，两者都可以通过调整宽度或 margin 来适应不同的屏幕尺寸，但 float:left 需要额外的清除浮动操作，而 Inline-block 则不需要。此外，Inline-block 元素之间的间隙可能会在某些情况下造成布局问题，而 float:left 则不会有这个问题。