尝试将vertical-align: top设置为inline-flex | inline-block元素以修复此偏移。
https://jsfiddle.net/jeca65my/2/
感谢@NenadVracar提供此解决方案

x1月0n1x日

使用display: inline-flex时，您将建立一个灵活容器。
Flex容器的初始设置是flex-direction: row。
这意味着容器的所有流入子元素（包括流入伪元素）将排成一行。这些子元素的display值（在本例中为table）将根据 *flex上下文 * 的规则被覆盖/忽略。
您的flex容器在一行中有两个flex项（伪元素）：
第一个

display: inline-block

当您使用display: inline-block时，您建立了一个 * 块格式上下文 *。
会考虑子元素的display属性。
带有display: table的伪元素是块元素，默认情况下，它们占据了整个可用宽度。因此，伪元素创建了两行：
第一次

vertical-align: baseline（第一次）

因为两个版本的代码都使用内联级别的display值，所以这将调用vertical-align属性，该属性的初始值为baseline。
当设置为display: inline-flex时，您在div.b下面看到的空白是由于基线对齐。
当设置为display: inline-block时，您在div.b下面看到的空白是由于基线对齐 * 以及两个块元素子项 * 的影响。
下面是一个更详细的解释：：https://stackoverflow.com/a/36975280/3597276

clear属性

.cf:after {
    clear: both;
}

你的clearfix方法不是任何空白的来源。事实上，它对你的布局没有任何影响，可以安全地删除。
只有在处理浮点数时才使用clear属性。

• 来自规格：*
  9.5.2控制浮子旁边的流量：clear属性

此属性指示元素框的哪些边不能与前面的浮动框相邻。
布局中不仅没有浮动元素，即使有，float和clear属性在flex上下文中也会被忽略。

3.弹性容器：flex和inline-flex显示值

• float和clear不会创建浮动或清除弹性物料，也不会使其流出。

你必须把你的页面想象成一个flow。你页面的每个元素都在流（DOM）中。你使用position属性来改变在流中的位置。
闭塞
块元素将始终开始一个新行。（即：div）的值
内嵌块
内联块元素是类似于div的块，但其中具有inline属性。（即：量程）
内嵌Flex
这与inline-block在流中的使用方式相同。它创建一个inline容器，但布局为flex。
对于您的示例，为了关注inline-block和inline-flex之间的差异，一个有趣的做法是在子div中添加文本。您将看到子div的行为将再次发生变化，因为它包含文本。JSFiddle example

**编辑：**我在SO上找到了一句话，很好地恢复了这种情况。感谢This post上的@BoltClock：

display：inline-flex不使flex项内联显示。它使flex容器内联显示。