Does Flexbox Override the Float Property?

Flexbox Containers Override Float Property

When you set the display property of an element to flex, it becomes a flex container. This establishes a new formatting context, which affects how its contents are positioned.

In a flex container, the float property is ignored. This is because floats do not intrude into the flex container and do not create floating or clearance of flex items.

Alternative Approach: Use Flex Properties

To position text to the right of a flex container footer element, use flex properties instead of float. The following example sets the justify-content property to flex-end to align the contents of the footer to the right:

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

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

The above is the detailed content of Does Flexbox Override the Float Property?. For more information, please follow other related articles on the PHP Chinese website!