浮动在弹性容器中不起作用答案

【问题标题】：float does not work in a flex container浮动在弹性容器中不起作用
【发布时间】：2017-01-04 19:10:21
【问题描述】：

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

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

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

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

https://jsfiddle.net/dhsgvxdx/

【问题讨论】：

见Which css rules are ignored when flexbox is active?

标签： html css flexbox

【解决方案1】：

默认情况下，弹性项目按源顺序排列。但是，order 属性控制它们在弹性容器中出现的顺序。

.item {
  order: 3; /* default is 0 */
}

【讨论】：

我正在努力将 flex 组件从中间断开到其兄弟姐妹下方的一行，同时保留兄弟姐妹的 flex 行为——这个解决方案对我来说非常有效。谢谢！

【解决方案2】：

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

来自 flexbox 规范：

3. Flex Containers: the flex and inline-flex display values

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

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

float 和 clear 不会创建 flex item 的浮动或清除，也不要使其脱离流动。

相反，只需使用 flex 属性：

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

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

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

【讨论】：

这没用，但是margin-left: auto;来自@d-soderberg 的建议确实

【解决方案3】：

如果此页脚仅包含右对齐项，您可以简单地将justify-content: flex-end 应用于 flex 容器。这样，您不必为其子项添加任何样式。

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

Codepen example

【讨论】：

是的。我试试看。它适用于某些情况。但就我而言，我有一些元素需要位于页脚的左侧。还有一些是正确的。
在这种情况下，在容器上使用justify-content: space-between - 不需要浮动或文本对齐。
嗯。我测试它。这太好了。通过这种方式，元素自动对齐。 tnx

【解决方案4】：

如果您像我在 jsfiddle 中所做的那样添加 margin-left: auto;，它会起作用：https://jsfiddle.net/dhsgvxdx/3/

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

【讨论】：

我知道它的回复较晚，但它会帮助其他人.. 如果您使用margin-left: auto，则无需使用float: right 属性....！就我而言，没有它也可以工作..
@ShubhamJha 你能解释一下它背后的逻辑吗？
float:right 和 text-align:right 都是不必要的。 margin-left:auto 可以解决问题。好主意 D.Soderberg