float 在 flex 容器中不起作用 [英] float does not work in a flex container

问题描述

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

I want to position text (foo link) in right of the footer element.

我需要页脚显示以保持 flex.

I need footer display to remain flex.

但是当我将其设置为 flex 时，span 的 float:right 不再起作用.

But when I set it to flex, float:right for span doesn't work anymore.

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

https://jsfiddle.net/dhsgvxdx/

推荐答案

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

The float property is ignored in a flex container.

来自 flexbox 规范:

3.Flex 容器:flex 和 inline-flex 显示价值观

一个弹性容器为其建立一个新的弹性格式化上下文内容.这与建立块格式化上下文相同，除了使用 flex 布局而不是块布局.

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.

例如，浮动不会侵入 flex 容器，并且flex 容器的边距不会随着它的边距折叠内容.

For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

float 和 clear 不会造成 flex item 的浮动或清除，并且不会将其移出流程.

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

相反，只需使用 flex 属性:

Instead, just use flex properties:

footer {
    display: flex;
    justify-content: flex-end;
}

<footer>
    <span>
       <a>foo link</a>
    </span>
</footer>

如果页脚中有更多项目，并且需要其他对齐选项，那么这里有两个指南:

If you have more items in the footer, and need other alignment options, then here are two guides:

• 在 CSS Flexbox 中，为什么没有justify-items"?和证明自我"属性?
• flex-wrap 如何与 align-self、align-items 和 align-content 配合使用?

这篇关于float 在 flex 容器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！