float: left; ambiguity - CSS

Question

Lets take two images as an example

With float: left;

Without float: left;

HTML

<h6><span>Sign Up</span></h6>

CSS

h6:before {
   content: url("images/arrow.png");
   padding-right: 8px;
   float: left; // Here lies problem
}

Question

Why without float: left; text (Signup) goes down ? What's science behind this ?

Answer 1

The default display mode of a pseudo element is display: inline; and the default vertical alignment is vertical-align: baseline;. This means that the image will be aligned to the baseline of the text.

When you float an element its display mode becomes display: block; and it is removed from the document flow. Vertical alignment is no longer a factor and in this case the top edge of the span is now aligned with the top edge of the floated pseudo element.

As Luis P. A. and Paulie_D allude to in the comments, changing the vertical alignment will allow for the non-floated pseudo element to be aligned to the middle of the text:

h6:before {
  content: url("http://placehold.it/20x20");
  display: inline-block;
  padding-right: 8px;
  vertical-align: middle;
}
h6 span {
  vertical-align: middle;
}

<h6><span>Sign Up</span></h6>