display: inline-flex
当你使用display: inline-flex时，你建立了一个弹性容器。
弹性容器的初始设置是flex-direction: row。
这意味着容器的所有流入子元素（包括流入伪元素）将排成一行。根据flex formatting context 的规则，这些子项的display 值（在本例中为table）被覆盖/忽略。
您的弹性容器在一行中有两个弹性项目（伪元素）：
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-flex;
height: 20px;
width: 20px;
}
.cf:before,
.cf:after {
content: "x";
display: table;
}
.cf:after {
clear: both;
}
<div class="a">
<div class="b cf"></div>
</div>
display: inline-block
当您使用display: inline-block 时，您将建立一个block formatting context。
尊重子元素的display 属性。
带有display: table 的伪元素是块元素，默认情况下，它们会占据整个可用宽度。因此，伪类创建了两行：
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-block;
height: 20px;
width: 20px;
}
.cf:before,
.cf:after {
content: "x";
display: table;
}
.cf:after {
clear: both;
}
<div class="a">
<div class="b cf"></div>
</div>
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 Controlling flow next to floats: the clear
property
此属性指示元素框的哪些边可能不是
与较早的浮动框相邻。
您的布局中不仅没有浮动元素，而且如果有，float 和 clear 属性在 flex 格式化上下文中仍然会被忽略。
3. Flex Containers: the flex and inline-flex display
values
-
float 和 clear 不会创建弹性项目的浮动或清除，也不要使其脱离流动。