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

1. **display: inline-block**
- **表现**: 使用 inline-block 属性的元素会水平排列，就像普通的 inline 元素一样，但是它们可以设置宽度和高度。这意味着你可以像对待块级元素一样设置 inline-block 元素的宽度和高度，同时它们仍然可以与其他 inline 元素并排显示。
- **优点**:
- 可以设置宽度和高度。
- 元素之间会自动添加间隙，无需额外的 margin 或 padding。
- 可以水平对齐（例如使用 text-align 属性）。
- **缺点**:
- 可能需要清除浮动（clearfix）来解决浮动元素导致的父元素高度塌陷问题。
- 不适用于需要严格水平对齐的情况，因为元素之间的间隙可能会导致问题。

2. **float: left**
- **表现**: 使用 float: left 属性的元素会向左浮动，直到与其他浮动元素或边缘相遇。浮动元素会脱离文档的常规流，这意味着它不会影响后续元素的位置。
- **优点**:
- 可以很容易地创建多列布局。
- 浮动元素可以与 clear 属性结合使用，以控制它们的布局。
- 浮动元素可以与 margin 结合使用，以实现精确的位置控制。
- **缺点**:
- 浮动元素会脱离文档流，可能会导致后续元素的位置问题。
- 需要清除浮动（clearfix）来解决浮动元素导致的父元素高度塌陷问题。
- 浮动元素可能会影响页面的可访问性，因为它们不会被屏幕阅读器正常读取。

在响应式设计中，选择使用 inline-block 还是 float: left 取决于你的布局需求和设计目标。如果你需要元素水平排列并且可以设置宽高，同时保持与文本的亲密性，那么 inline-block 可能是更好的选择。如果你需要创建多列布局或者需要精确地控制元素的位置，那么 float: left 可能更合适。

需要注意的是，随着 CSS 网格布局（Grid Layout）和弹性布局（Flexbox）的普及，现在有更现代和灵活的方式来创建响应式布局，这些方式通常比使用 float 和 inline-block 属性更强大和易于维护。