Why inline-flex element with clearfix has a weird white space?

Question

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 dis

Answer 1

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

---

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

---

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.