html - 为什么带有 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 Demo

Answer 1

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

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

这意味着容器的所有流入子元素(包括流入伪元素)将排成一行。 display根据 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;
}

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

display: inline-block
当您使用 display: inline-block ，您建立一个 block 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是由于基线对齐结合两个块元素子元素的影响。

这里有更详细的解释:: https://stackoverflow.com/a/36975280/3597276
clear属性(property)

.cf:after {
    clear: both;
}

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

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

从规范:

9.5.2 Controlling flow next to floats: the clear property

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

您的布局中不仅没有 float 元素，而且如果有， float和 clear在 flex 格式化上下文中，属性仍然被忽略。

3. Flex Containers: the flex and inline-flex display values

• float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.