The float property is ignored in a flex container.
From the flexbox specification:
3. Flex Containers: the
flexandinline-flexdisplay
valuesA 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.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.
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:
- In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
- How does flex-wrap work with align-self, align-items and align-content?