html 清除flex,html – 为什么带有clearfix的inline-flex元素有一个奇怪的空格？

display：inline-flex

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

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

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

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

.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;

}

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;

}

vertical-align：baseline

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

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

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

清晰的财产

.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.