Html float 在 flex 容器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39194630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
float does not work in a flex container
提问by mlibre
I want to position text (foo link) in right of the footer element.
我想在页脚元素的右侧放置文本（foo 链接）。
I need footer display to remain flex.
我需要保留页脚显示flex。
But when I set it to flex, float:rightfor span doesn't work anymore.
但是当我将它设置为 时flex，float:right因为跨度不再起作用。
<footer style="display: flex;">
<span style="text-align: right;float: right;">
<a>foo link</a>
</span>
</footer>回答by Michael Benjamin
The floatproperty is ignored in a flex container.
该float属性在 flex 容器中被忽略。
From the flexbox specification:
来自 flexbox 规范：
3. Flex Containers: the
flexandinline-flexdisplay valuesA flex container establishes a new flex formatting contextfor its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.
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.
floatandcleardo not create floating or clearance of flex item, and do not take it out-of-flow.
3. Flex容器：所述
flex和inline-flex显示的值flex 容器为其内容建立一个新的flex 格式化上下文。这与建立块格式上下文相同，只是使用 flex 布局而不是块布局。
例如，浮动不会侵入 flex 容器，并且 flex 容器的边距不会与其内容的边距一起折叠。
float并且clear不要创建弹性项目的浮动或间隙，并且不要将其移出流程。
Instead, just use flex properties:
相反，只需使用 flex 属性：
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:
如果页脚中有更多项目，并且需要其他对齐选项，那么这里有两个指南：
回答by D.Soderberg
It works if you add margin-left: auto;like I did here in the jsfiddle: https://jsfiddle.net/dhsgvxdx/3/
如果您margin-left: auto;像我在 jsfiddle 中所做的那样添加，它会起作用：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>
回答by alanbuchanan
If this footer is only to contain a right-aligned item, you can simply apply justify-content: flex-endto the flex container. This way, you do not have to add any styles to its children.
如果这个页脚只包含一个右对齐的项目，你可以简单地应用justify-content: flex-end到 flex 容器。这样，您不必为其子项添加任何样式。
footer {
display: flex;
justify-content: flex-end;
}
