浮动在flex容器中不起作用

我想在页脚元素的右边放置文本（foo链接）。

我需要保留页脚显示flex。

但是当我将其设置为时flex，float:rightspan不再起作用。

<footer style="display: flex;">
     <span style="text-align: right;float: right;">
        <a>foo link</a>
     </span>
</footer>

该float属性在flex容器中被忽略。

根据flexbox规范：

一个伸缩容器为其内容建立一个新的_伸缩格式上下文_。这与建立块格式化上下文相同，除了使用Flex布局而不是块布局。

例如，浮点数不会侵入flex容器，并且flex容器的边距不会随其内容的边沿而收缩。

float并且clear不要在弹性项目上产生浮动或间隙，也不要使其流出。

相反，只需使用flex属性：

footer {
    display: flex;
    justify-content: flex-end;
}
<footer>
    <span>
       <a>foo link</a>
    </span>
</footer>