为什么带有clearfix的inline-flex元素有一个奇怪的白色空间？

Question

inline-flex在对它应用clearfix时,我有一个奇怪的元素行为.当我为具有inline-flex显示属性的元素设置clearfix时,会在其前面出现奇怪的空格:

但是当inline-block使用时,行为是不同的:

我不明白为什么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>

JSFiddle演示

Answer 1

display: inline-flex

使用时display: inline-flex，您将建立一个flex容器。

flex容器的初始设置为flex-direction: row。

这意味着容器的所有流入子元素（包括流入伪元素）将排成一行。根据flex格式化上下文的规则display，这些子项的值（table在这种情况下）被覆盖/忽略 。

您的伸缩容器在一行中有两个伸缩项（伪元素）：

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

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

display: inline-block

使用时display: inline-block，您将建立块格式化上下文。

display尊重子元素的属性。

带有的伪元素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

由于您的两个版本的代码都使用内联级别的display值，因此这会调用pl​​ay vertical-align的初始值为的属性baseline。

div.b设置为时，您在下方看到的空白display: inline-flex是由于基线对齐所致。

div.b设置为时，您在下面看到的空白display: inline-block是由于基线对齐以及两个块元素子元素的影响所致。

这是更详细的说明:: /sf/answers/2588269631/

该clear物业

.cf:after {
    clear: both;
}

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

clear仅在处理浮点数时才使用该属性。

从规格：

9.5.2控制浮点旁边的流：clear 属性

此属性指示元素框的哪些边可能不与较早的浮动框相邻。

布局中不仅没有浮动元素，而且即使存在，在弹性格式上下文中仍会忽略float和clear属性。

3. Flex容器：flex和inline-flex显示值

• float并且clear不要在弹性项目上产生浮动或间隙，也不要使其流出。

Answer 2

尝试将 a 设置verical-align: top;为您的inline-flex | inline-block元素以修复此偏移量。

https://jsfiddle.net/jeca65my/2/

感谢@NenadVracar 在这个解决方案上