Comment « overflow : hidden » affecte-t-il le positionnement du flotteur en CSS ?

Débordement CSS : caché avec des flotteurs

En HTML et CSS, la propriété overflow contrôle le comportement du contenu qui dépasse les dimensions de son conteneur . Dans l'exemple fourni, un élément ul contient une liste d'éléments li, chacun contenant une balise a. Les éléments li flottent vers la gauche, ils apparaîtraient donc normalement les uns à côté des autres sur la page. Cependant, l'élément ul a la propriété overflow: Hidden définie, ce qui soulève la question de savoir comment cette propriété affecte le positionnement du texte.

La propriété overflow: Hidden établit un nouveau contexte de formatage de bloc (BFC) pour l'élément ul. élément ul. Cela signifie que le contenu au sein de l'ul est traité comme une unité distincte du contenu en dehors de l'ul. Par conséquent, le texte de l'élément p qui suit l'ul est poussé sous l'ul au lieu d'apparaître à droite de celui-ci.

Ce comportement se produit car, avec overflow: Hidden, l'élément ul devient un BFC. En tant qu'élément de niveau bloc, ul a une largeur par défaut de 100 %, qui remplit toute la largeur de son conteneur parent. Lorsque les éléments li flottants dépassent la largeur de l'ul, ils sont positionnés à l'intérieur du BFC et ne débordent pas à l'extérieur.

En ajoutant overflow: caché à l'élément ul et créant ainsi un BFC, on établit un nouveau flux de contenu au sein de l'ul. Cela a pour conséquence que le texte de l'élément p est poussé sous l'ul au lieu d'apparaître à côté de celui-ci. Le texte est effectivement « contenu » dans l'ul BFC et n'interagit pas avec le contenu environnant.

Conclusion :

Utiliser le débordement : caché avec des flotteurs crée un nouveau bloc contexte de formatage, qui modifie la façon dont le contenu circule dans le conteneur. En empêchant le contenu de déborder à l'extérieur du conteneur, il influence le positionnement des éléments et est utilisé pour obtenir divers effets de mise en page.

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!