让我们以两张图片为例
随着浮动：左;
没有浮动：左;
<h6><span>Sign Up</span></h6>
CSS
h6:before {
content: url("images/arrow.png");
padding-right: 8px;
float: left; // Here lies problem
}
题
解决方法
伪元素的默认显示模式是display：inline;默认的垂直对齐方式是vertical-align：baseline;.这意味着图像将与文本的基线对齐.
浮动元素时,其显示模式变为display：block;它将从文档流中删除.垂直对齐不再是一个因素,在这种情况下,跨度的上边缘现在与浮动伪元素的上边缘对齐.
正如Luis P. A.和Paulie_D在评论中提到的那样,更改垂直对齐将允许非浮动的伪元素与文本的中间对齐：
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>
