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 :

• Création d'un nouveau bloc conteneur pour les éléments flottants
• Définition du Propriété 'overflow' en 'auto'

Avantages de l'établissement d'un BFC

En établissant un BFC, les événements suivants se produisent :

• Les éléments flottants sont contraints dans le nouveau bloc contenant
• Le conteneur est obligé de s'étendre verticalement pour accueillir ses enfants flottants

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!