但是当使用内联块时,行为是不同的：
我不明白为什么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>
@L_404_2@
解决方法
使用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
floatandcleardo not create floating or clearance of flex item,and do not take it out-of-flow.
