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

Question

对应用clearfix时，我有inline-flex元素的奇怪行为。当我为具有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 Demo

Answer 1

display: inline-flex

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

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

这意味着容器的所有in-flow子元素（包括in-flow伪元素）将排成一行。根据{{​​3}}的规则，覆盖/忽略这些子项的display值（在本例中为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;
}

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

display: inline-block

使用display: inline-block时，您会建立flex formatting context。

尊重子元素的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值，因此会调用vertical-align属性，其初始值为baseline。

设置为div.b时，您在display: inline-flex下面看到的空白区域是由于基线对齐造成的。

设置为div.b时，您在display: inline-block下方看到的空白区域是由于基线对齐以及两个块元素子项的效果。

以下是更详细的说明:: block formatting context

clear属性

.cf:after {
    clear: both;
}

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

只有在处理浮动时才使用clear属性。

来自规范：

  

https://stackoverflow.com/a/36975280/3597276

     

此属性指示元素框的哪些边可能不是   毗邻较早的浮箱。

不仅布局中没有浮动元素，但如果存在，则在Flex格式化上下文中仍会忽略float和clear属性。

  

9.5.2 Controlling flow next to floats: the clear property

     

  
• float和clear不会创建弹性项目的浮动或间隙，也不会使其脱离流动。
  

Answer 2

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

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

感谢this solution

上的@NenadVracar

Answer 3

您必须将您的网页想象为flow。页面的每个元素都在流（DOM）中。您正在使用position属性来更改流中的位置。

  

块

块元素将始终开始新行。 （即：div）

  

内联块

内联块元素是div之类的块，但其中包含inline个属性。 （即：span）

  

直列挠曲

这与流程中inline-block的使用方式相同。它创建了一个inline但flex布局的容器。

对于您的示例，要关注inline-block和inline-flex之间的区别，要做的有趣事情是在子div中添加文本。您将看到您的子div的组合将再次更改，因为它中包含文本。 JSFiddle example

编辑：我在SO上找到了一个可以恢复状态的句子。感谢@BoltClock上的This post：

  

display：inline-flex不会使flex项显示为内联。它使Flex容器显示为内联。