当对它应用clearfix时,我有一个inline-flex元素的奇怪行为.当我为具有inline-flex显示属性的元素设置clearfix时,会出现奇怪的空格：
@H_403_2@
@H_403_2@但是当使用内联块时,行为是不同的：
@H_403_2@
@H_403_2@我不明白为什么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>@H_403_2@JSFiddle Demo
解决方法
display：inline-flex
@H_403_2@使用display：inline-flex时,可以建立Flex容器.
@H_403_2@Flex容器的初始设置是flex-direction：row.
@H_403_2@这意味着容器的所有in-flow子元素(包括in-flow伪元素)将排成一行.根据flex formatting context的规则,覆盖/忽略这些子项的显示值(在本例中为table).
@H_403_2@您的Flex容器在一行中有两个flex项(伪元素)：
.a,.cf:after {
content: "x";
display: table;
}
.cf:after {
clear: both;
}
<div class="a"> <div class="b cf"></div> </div>@H_403_2@display：内联块 @H_403_2@使用display：inline-block时,建立block formatting context. @H_403_2@子元素的显示属性受到尊重. @H_403_2@带有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>@H_403_2@vertical-align：baseline @H_403_2@因为您的代码的两个版本都使用内联级别的显示值,所以这会调用vertical-align属性,其初始值为baseline. @H_403_2@设置为显示时,您在div.b下方看到的空白区域：inline-flex是由于基线对齐. @H_403_2@设置为显示时,您在div.b下方看到的空白区域：内联块是由于基线对齐以及两个块元素子项的效果. @H_403_2@这是一个更详细的解释:: https://stackoverflow.com/a/36975280/3597276 @H_403_2@清晰的财产
.cf:after {
clear: both;
}
@H_403_2@您的clearfix方法不是任何空格的来源.实际上,它对您的布局没有任何影响,可以安全地删除.
@H_403_2@只有在处理浮点数时才使用clear属性.
@H_403_2@从规格：
@H_403_2@07003 @H_403_2@This property indicates which sides of an element’s Box(es) may not be@H_403_2@不仅布局中没有浮动元素,但如果有,浮动和清除属性仍会在flex格式化上下文中被忽略.
adjacent to an earlier floating Box.
@H_403_2@07004
floatandcleardo not create floating or clearance of flex item,and do not take it out-of-flow.
