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

1. **display: inline-block**
- **表现**: 使用 inline-block 属性的元素会像内联元素（inline）一样排列，即它们会水平排列在同一行，直到行满为止，然后开始新的一行。与内联元素不同的是，inline-block 元素可以设置宽度和高度，并且可以包含块级元素。
- **优点**:
- 可以设置宽度和高度，便于布局控制。
- 元素之间会自动添加间隙，无需额外的空白符或 margin。
- 可以与其他内联元素（如 span）一起使用，布局更加灵活。
- **缺点**:
- 可能会导致外边距（margin）或边框（border）的怪异行为，尤其是在子元素和父元素之间。
- 如果不设置明确的宽度，可能会导致意外的布局结果。

2. **float: left**
- **表现**: 使用 float: left 的元素会向左浮动，直到其边缘碰到包含它的元素的边缘为止。其他元素会绕过浮动元素。如果多个元素都浮动，它们会堆叠在一行上，直到行满为止，然后开始新的一行。
- **优点**:
- 可以很容易地创建多列布局，尤其是在结合 clearfix 技巧时。
- 浮动元素会脱离文档流，使得可以在它们下面放置其他元素。
- **缺点**:
- 需要清除浮动（clearfix），以避免父元素的怪异行为。
- 浮动元素会干扰正常的文档流，可能导致后续元素位置错乱。
- 需要额外的样式来管理浮动元素周围的空间。

在响应式设计中，通常需要根据不同的设备尺寸调整布局。Inline-block 通常更适用于响应式布局，因为它不会像 float 那样破坏文档流，并且更容易与媒体查询结合使用，以适应不同的屏幕尺寸。此外，inline-block 元素的尺寸可以根据需要进行调整，这对于响应式设计中的灵活布局非常重要。

然而，float 在某些情况下仍然很有用，比如创建侧边栏布局或者需要对齐元素时。在响应式设计中，可能需要结合使用 float 和 inline-block，以及媒体查询来创建在不同设备上看起来都美观的布局。