但是当使用内联块时,行为是不同的：
我不明白为什么inline-flex与inline-block有不同的行为..为什么它有那么奇怪的空间.
.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时,可以建立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@H_403_68@ adjacent to an earlier floating Box.
不仅布局中没有浮动元素,但如果有,浮动和清除属性仍会在flex格式化上下文中被忽略.
07004
floatandcleardo not create floating or clearance of flex item,and do not take it out-of-flow.
