.a,.b {
  border: 1px solid red;
}
.a {
  text-align: center;
}
.b {
  display: inline-flex;
  height: 20px;
  width: 20px;
}
.cf:before,.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}

<div class="a">
  <div class="b cf"></div>
</div>

display：inline-flex

使用display：inline-flex时,可以建立Flex容器.

Flex容器的初始设置是flex-direction：row.

这意味着容器的所有in-flow子元素(包括in-flow伪元素)将排成一行.根据flex formatting context的规则,覆盖/忽略这些子项的显示值(在本例中为table).

您的Flex容器在一行中有两个flex项(伪元素)：

.a,.cf:after {
  content: "x";
  display: table;
}
.cf:after {
  clear: both;
}

<div class="a">
  <div class="b cf"></div>
</div>

display：内联块

使用display：inline-block时,建立block formatting context.

子元素的显示属性受到尊重.

带有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

因为您的代码的两个版本都使用内联级别的显示值,所以这会调用vertical-align属性,其初始值为baseline.

设置为显示时,您在div.b下方看到的空白区域：inline-flex是由于基线对齐.

设置为显示时,您在div.b下方看到的空白区域：内联块是由于基线对齐以及两个块元素子项的效果.

这是一个更详细的解释:: https://stackoverflow.com/a/36975280/3597276

清晰的财产

.cf:after {
    clear: both;
}

您的clearfix方法不是任何空格的来源.实际上,它对您的布局没有任何影响,可以安全地删除.

只有在处理浮点数时才使用clear属性.

从规格：

07003

This property indicates which sides of an element’s Box(es) may not be
adjacent to an earlier floating Box.

不仅布局中没有浮动元素,但如果有,浮动和清除属性仍会在flex格式化上下文中被忽略.

07004

• float and clear do not create floating or clearance of flex item,and do not take it out-of-flow.