Maison >interface Web >tutoriel CSS >Pourquoi « overflow : auto » fait-il qu'un conteneur s'agrandisse pour s'adapter aux éléments flottants ?
Pourquoi « overflow : auto » augmente-t-il la hauteur du conteneur pour accueillir des éléments flottants ?
Lors de la mise en œuvre d'une disposition à deux colonnes avec des éléments flottants, vous pouvez rencontrer un problème où le conteneur ne s'étend pas verticalement pour s'adapter à ses enfants flottants. L'ajout de « overflow : auto » au conteneur résout ce problème.
Comprendre les éléments flottants
Les éléments flottants sont positionnés en dehors du flux de documents normal, semblant flotter à côté d'autres éléments. . A ce titre, le conteneur parent ignore l'existence des éléments flottants et ne tiendra pas compte de leur hauteur lors du calcul de sa propre hauteur.
Dégagement et débordement
Pour forcer le conteneur parent pour accueillir ses enfants flottants, vous devez soit effacer les flottants, soit établir un nouveau contexte de formatage de bloc (BFC). Overflow : auto est une propriété CSS qui crée un nouveau BFC.
Comment Overflow : Auto crée un BFC
Overflow : auto établit un BFC en satisfaisant certaines conditions, notamment :
Avantages de l'établissement d'un BFC
En établissant un BFC, les événements suivants se produisent :
Remarque sur l'effacement des flotteurs
Débordement : l'auto n'efface pas les flotteurs ; cela crée seulement un BFC. Pour effacer les flottants, vous devez ajouter un élément de compensation, tel qu'un div avec le style « clear : two », après les éléments flottants. Cependant, un élément parent ne peut pas effacer ses propres enfants flottants.
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!