元素float:right 后右对齐换行的原因及其解决

今天遇到一个html的问题

.tag.tag_success.tag_x
     %span tag.display_name
     %a(href="javascript:void(0)" style= "float:right;")
                

给a元素添加float: right 它会脱离队伍，跳到下一行。

原因：

当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥，现在a元素是float:right，但是文本还是float:none，所以问题就出现了。

如果要让两者显示在同一行，解决方案有两种：

1. 把float的元素写到非float元素前显示，即：

.tag.tag_success.tag_x
     %a(href="javascript:void(0)" style= "float:right")
     %span tag.display_name

2. 把文本也设成float，即：

.tag.tag_success.tag_x
     %span(style="float:left;") tag.display_name
     %a(href="javascript:void(0)" style= "float:right;")

这两种方法均可实现需求，根据情况选择。