Pourquoi Float ne fonctionne-t-il pas avec Flexbox et quelle est la meilleure alternative ?

Flexbox et Float : une combinaison instable

Lorsque vous essayez de positionner du texte à droite d'un élément de pied de page dans un conteneur flexible, en utilisant l'option La propriété float peut sembler un choix naturel. Cependant, cette technique se heurte à un obstacle inattendu.

Lorsque la propriété display est définie sur flex, la propriété float de tout élément enfant dans le conteneur devient inefficace. Ce comportement découle des principes fondamentaux de flexbox.

Flexbox et Float : un choc de principes

La propriété float est principalement utilisée dans les dispositions de blocs traditionnelles, où elle permet éléments pour écarter le contenu ultérieur. Dans un conteneur flexible, cependant, l'algorithme de mise en page remplace ces règles.

Comme indiqué dans la spécification flexbox :

Les flotteurs n'empiètent pas sur le conteneur flexible et les marges du conteneur flexible ne s'effondrent pas. avec les marges de son contenu.

Une solution plus adaptée : Flex Propriétés

Au lieu de s'appuyer sur la propriété float, flexbox propose une solution plus appropriée : la propriété justify-content. En définissant justify-content sur flex-end, les éléments du conteneur flexible seront alignés sur le bord droit.

Extrait de code :

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

footer span {
  text-align: right;
}

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

Cette approche révisée positionne avec succès le « lien foo » à droite de l'élément de pied de page tout en conservant une mise en page flexible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!