为什么带有 clearfix 的 inline-flex 元素有一个奇怪的空白? [英] Why inline-flex element with clearfix has a weird white space?

问题描述

在对 inline-flex 元素应用清除修复时，我有一个奇怪的行为.当我为具有 inline-flex 显示属性的元素设置 clearfix 时，奇怪的空白出现在它之前:

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

我不明白为什么 inline-flex 与 inline-block 有不同的行为......以及为什么它有那个奇怪的空间.

.a,.b {边框:1px纯红色；}.一个 {文本对齐:居中；}.b {显示:inline-flex；高度:20px；宽度:20px；}.cf:之前，.cf:在{之后内容: " ";显示:表；}.cf:在{之后清楚:两者；}

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

JSFiddle 演示

解决方案

display: inline-flex

当你使用display:inline-flex时，你就建立了一个弹性容器.

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

这意味着容器的所有流入子元素(包括流入伪元素)将排成一行.根据 flex 格式化上下文.

你的 flex 容器在一行中有两个 flex 项目(伪元素):

.a,.b {边框:1px纯红色；}.一个 {文本对齐:居中；}.b {显示:inline-flex；高度:20px；宽度:20px；}.cf:之前，.cf:在{之后内容:x"；显示:表；}.cf:在{之后清楚:两者；}

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

<小时>

显示:inline-block

当你使用 display: inline-block 时，你建立了一个 块格式上下文.

尊重子元素的 display 属性.

带有 display: table 的伪元素是块元素，默认情况下，它们占据整个可用宽度.因此，伪代码创建了两行:

.a,.b {边框:1px纯红色；}.一个 {文本对齐:居中；}.b {显示:内联块；高度:20px；宽度:20px；}.cf:之前，.cf:在{之后内容:x"；显示:表；}.cf:在{之后清楚:两者；}

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

<小时>

垂直对齐:基线

因为您的代码的两个版本都使用内联级 display 值，这会调用 vertical-align 属性，其初始值为 baseline.

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

当设置为 display: inline-block 时，您在 div.b 下方看到的空白是由于基线对齐结合两种效果块元素子元素.

这里有更详细的解释:https://stackoverflow.com/a/36975280/3597276><小时>

clear 属性

.cf:after {清楚:两者；}

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

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

来自规范:

<块引用>

9.5.2 控制浮动旁边的流量:<代码>清除财产

此属性指示元素框的哪一侧可能不是与较早的浮动框相邻.

不仅布局中没有浮动元素，而且如果有，float 和 clear 属性在 flex 格式上下文中仍然会被忽略.

<块引用>

3.Flex 容器:flex 和 inline-flex 显示价值观

• float 和 clear 不会造成 flex item 的浮动或清除，并且不会将其移出流程.

I have a weird behaviour of an inline-flex element when applying a clearfix to it. When I set a clearfix to an element which has an inline-flex display property the strange white space appears before it:

But when the inline-block is used the behaviour is different:

I don't understand why inline-flex has a different behaviour than inline-block.. and why it has that weird space.

.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

解决方案

display: inline-flex

When you use display: inline-flex, you establish a flex container.

An initial setting of a flex container is flex-direction: row.

This means that all in-flow child elements of the container (including in-flow pseudo-elements) will line up in a row. The display value of these children (table, in this case) is overridden/ignored, in accordance with the rules of a flex formatting context.

Your flex container has two flex items (the pseudo-elements) in one line:

.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

When you use display: inline-block, you establish a block formatting context.

The display property of child elements is respected.

Your pseudo-elements with display: table are block elements which, by default, occupy the full available width. Hence, the pseudos are creating two rows:

.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

Because both versions of your code use inline-level display values, this calls into play the vertical-align property, who's initial value is baseline.

The white space you are seeing below div.b when set to display: inline-flex is due to baseline alignment.

The white space you are seeing below div.b when set to display: inline-block is due to baseline alignment in combination with the effects of two block element children.

Here is a more detailed explanation:: https://stackoverflow.com/a/36975280/3597276

---

The clear property

.cf:after {
    clear: both;
}

Your clearfix method is not the source of any of the white space. In fact, it's having no effect on your layout and can be safely removed.

You use the clear property only when dealing with floats.

From the spec:

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.

Not only are there no floated elements in your layout, but if there were, the float and clear properties are nonetheless ignored in a flex formatting context.

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.

这篇关于为什么带有 clearfix 的 inline-flex 元素有一个奇怪的空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！