浮动在flex容器中不起作用

Question

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

我需要保留页脚显示flex。

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

<footer style="display: flex;">

     <span style="text-align: right;float: right;">

        <a>foo link</a>

     </span>

</footer>

Answer 1

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

根据flexbox规范：

3. Flex容器：flex和inline-flex显示值

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

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

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

相反，只需使用flex属性：

footer {

    display: flex;

    justify-content: flex-end;

}


<footer>

    <span>

       <a>foo link</a>

    </span>

</footer>