Why Doesn\'t Float Work with Flexbox, and What\'s the Better Alternative?

Flexbox and Float: An Unstable Combination

When attempting to position text in the right of a footer element within a flex container, using the float property may seem like a natural choice. However, this technique encounters an unexpected obstacle.

When the display property is set to flex, the float property for any child elements within the container becomes ineffective. This behavior stems from the fundamental principles of flexbox.

Flexbox and Float: A Clash of Principles

The float property is primarily used in traditional block layouts, where it allows elements to push aside subsequent content. In a flex container, however, the layout algorithm supersedes these rules.

As stated in the flexbox specification:

Floats do not intrude into the flex container, and the flex container's margins do not collapse with the margins of its contents.

A More Suitable Solution: Flex Properties

Instead of relying on the float property, flexbox provides a more appropriate solution: the justify-content property. By setting justify-content to flex-end, elements within the flex container will be aligned to the right edge.

Code Snippet:

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

footer span {
  text-align: right;
}

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

This revised approach successfully positions the "foo link" at the right of the footer element while maintaining a flex layout.

The above is the detailed content of Why Doesn\'t Float Work with Flexbox, and What\'s the Better Alternative?. For more information, please follow other related articles on the PHP Chinese website!