Comment « overflow : hidden » affecte-t-il les éléments flottants et le contenu ultérieur ?

Débordement CSS : caché avec les flotteurs

Comprendre l'impact de la propriété Overflow

La propriété overflow en CSS spécifie la gestion de contenu qui dépasse les limites de son élément conteneur. Lorsqu'il est appliqué à un élément avec des éléments enfants flottants, il établit un nouveau contexte de formatage de bloc.

Effet sur le placement du texte

Considérez l'extrait de code suivant :

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #dddddd;
  padding: 8px;
}

Par défaut, un élément paragraphe (p) apparaissant après le ul serait poussé vers le bas car ul est un niveau bloc élément. Cependant, lorsque le débordement est défini sur caché sur l'ul, ce qui suit se produit :

• L'ul établit un contexte de formatage de bloc, contenant ses éléments enfants float (le lis).
• Le ul "réapparaît" et ne s'effondre plus à une hauteur de 0px.
• Le paragraphe (p) est poussé à la fin du contenu de l'ul, apparaissant après les éléments flottants.

En effet, overflow:hidden crée un nouvel environnement de formatage dans lequel l'ul agit comme un élément de niveau bloc, contenant ses éléments enfants.

Explication technique

Selon le CSS spécification :

• Lorsque le débordement est 'visible' : "Les éléments au niveau du bloc non remplacés n'établissent pas de nouveau contexte de formatage de bloc, quelle que soit leur propriété float." ([§10.6.3](https://www.w3.org/TR/CSS2/visudet.html#block-level))
• Lorsque le débordement est défini sur un niveau non visible ' value : "Un contexte de formatage de bloc est établi par l'élément racine de tout sous-arbre dont l'élément racine est la racine de la liste enfants d'un élément de niveau en ligne ou atomique de niveau en ligne, l'élément est flottant, est en position absolue ou a un « débordement » autre que « visible ». ([§10.6.7](https://www.w3.org/TR/CSS21/visudet.html#containing-block))

Le paramètre overflow:hidden sur l'ul crée un nouveau bloquer le contexte de formatage, l'amenant à contenir ses éléments enfants et à pousser le paragraphe vers le bas.

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!