different represent of HTML in firefox and chrome

Question

I am confused with: this code daemon display different in Firefox and Chrome:

<div style="border:1px solid black;"> 
    <a href="baidu.com" >AA<span style="float:right">BB</span></a>
</div>

a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857;
    color: rgb(51, 51, 51);
    white-space: nowrap;
    border:1px solid red;
}

CodePen: http://codepen.io/ChinaXing/pen/jwFon

In Chrome:

In Firefox:

Answer 1

Remove the style 'white-space: nowrap'

AABB

 a {
    padding: 3px 20px;
    font-weight: normal;
    clear: both;
    line-height: 1.42857;
    color: rgb(51, 51, 51);
    border:1px solid red;
}
span {
    float:right;
}

Answer 2

Add text-align:left; overflow:hidden; text-align:left; overflow:hidden; to the anchor tag