html - 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 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>

Answer 1

Try set a verical-align: top; to your inline-flex | inline-block element to fix this offset.

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

Thank's to @NenadVracar on this solution