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

1. 显示方式不同：
- inline-block：将元素设置为 inline-block 会使得元素以行的形式排列，即水平方向排列，这与文本的显示方式类似。每个 inline-block 元素都会独占一行，除非设置了宽度（width）属性。
- float:left：将元素设置为 float:left 会使该元素向左浮动，直到其外边缘碰到包含它的元素的边框为止。这样可以在一行中放置多个浮动元素，它们会从左到右排列。

2. 占据空间不同：
- inline-block：inline-block 元素在水平方向上会占据它指定的宽度，但在垂直方向上不会占用额外的空间，除非设置了高度（height）属性。这意味着在一行中，所有的 inline-block 元素会紧挨着排列，不会在它们之间产生空白。
- float:left：浮动元素只会占据它本身内容所占的空间，不会为内联内容留出额外的垂直空间。但是，如果浮动元素下面有块级内容，块级内容会“环绕”在浮动元素周围。

3. 对父元素的影响不同：
- inline-block：由于 inline-block 元素类似于文本的显示方式，它们不会像 float 元素那样影响父元素的布局。父元素可以根据需要正常地排列 inline-block 元素。
- float:left：当元素被设置为 float:left 时，它会“脱离”正常的文档流，这意味着它不会参与父元素的常规布局。这可能会导致父元素的宽度收缩，除非父元素也设置了浮动或者使用 clear 属性来清除浮动的影响。

4. 清除浮动的方式不同：
- inline-block：由于 inline-block 元素不会像 float 元素那样影响父元素的布局，因此通常不需要清除浮动。
- float:left：如果使用 float:left，当需要让后续的元素在浮动元素下方开始排列时，需要清除浮动。这通常通过在父元素上设置 clear:both 来实现。

5. 适用场景不同：
- inline-block：适合需要元素水平排列，且不希望影响父元素布局的情况，例如制作导航菜单、水平排列的图标等。
- float:left：适合需要让元素向左浮动，并且可能需要在一行中排列多个浮动元素的情况，例如图片的左右浮动、多列布局等。

总结来说，inline-block 更适合于创建行内布局，而 float:left 则更适合创建浮动布局。在响应式设计中，根据设计需求选择合适的布局方式对于保证布局在不同屏幕尺寸下的适应性和美观性至关重要。