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

1. 显示方式不同：
- inline-block: 这种display属性值使得元素以行的形式排列，类似于文字，但是每个元素可以设置宽度和高度。这种布局方式不会创建块级格式化上下文（block formatting context），这意味着它不会像块级元素那样中断文本流。
- float:left: 这个浮动属性值使得元素向左浮动，直到它的边缘碰到包含它的元素的边缘或者父元素的内容。浮动元素会创建一个块级格式化上下文，它会中断文本流，直到浮动元素被清除。

2. 水平对齐方式不同：
- inline-block: 元素会自动水平对齐，通常是基线对齐，这取决于字体和浏览器设置。可以通过设置 text-align 属性来调整 inline-block 元素的水平对齐方式。
- float:left: 浮动元素会按照它们在HTML中的顺序从左到右排列，除非设置了 clear 属性来清除浮动。

3. 换行规则不同：
- inline-block: 如果 inline-block 元素超出了父元素的宽度，它会换行，并在新行上继续排列。
- float:left: 如果浮动元素超出了父元素的宽度，它不会自动换行，除非父元素设置了 overflow:hidden 或者 clear 属性来清除浮动。

4. 垂直对齐方式不同：
- inline-block: 元素的垂直对齐方式通常是基线对齐，这可以通过设置 vertical-align 属性来调整。
- float:left: 浮动元素的垂直对齐方式取决于周围的内容，通常不需要额外的样式来调整。

5. 子元素的行为不同：
- inline-block: 子元素也会继承 inline-block 布局方式，除非另有设置。
- float:left: 子元素的行为取决于 float 属性的设置，如果子元素也设置了 float，它们会按照同样的方式浮动。

6. 适用场景不同：
- inline-block: 适合需要元素水平排列且不希望中断文本流的情况，比如导航菜单、图标列表等。
- float:left: 适合需要对元素进行浮动布局的情况，比如图像旁边有文字说明，或者需要创建多列布局。

在实际应用中，选择使用 inline-block 还是 float 取决于具体的布局需求和设计目标。在响应式设计中，需要考虑不同设备上的布局适应性，并根据需要结合媒体查询来调整元素的布局方式。