小编典典

浮动在flex容器中不起作用

html

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

我需要保留页脚显示flex

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

<footer style="display: flex;">

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

        <a>foo link</a>

     </span>

</footer>

阅读 1784

收藏
2020-05-10

共1个答案

小编典典

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

根据flexbox规范:

3. Flex容器:flexinline-flex显示值

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

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

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

相反,只需使用flex属性:

footer {

    display: flex;

    justify-content: flex-end;

}


<footer>

    <span>

       <a>foo link</a>

    </span>

</footer>
2020-05-10