Firefox和Chrome中HTML的不同表示

Question

我感到困惑：此代码守护程序在Firefox和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

在Chrome中：

在Firefox中：

Answer 1

删除样式“空白：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

添加text-align:left; overflow:hidden; text-align:left; overflow:hidden; 到锚标签