Pourquoi « overflow : auto » résout-il le problème d'effondrement de la hauteur avec les flotteurs ?

Comprendre le rôle de « overflow : auto » dans la compensation des flotteurs

En CSS, les flotteurs sont un moyen courant de créer des mises en page multi-colonnes . Cependant, lors de l'utilisation de flotteurs, il est important de prendre en compte leur impact sur la hauteur du conteneur parent. Ce problème peut être résolu en utilisant « overflow : auto » dans le CSS du parent.

Pourquoi la hauteur du wrapper ne s'étend-elle pas pour contenir des colonnes flottantes ?

Les flotteurs créent un comportement intéressant où ils sont supprimés du flux normal du document. Par conséquent, le conteneur parent agit comme si les éléments flottants n'étaient pas présents. Si aucun autre contenu n'existe dans le parent, il restera vide, l'empêchant de s'étendre pour accueillir les colonnes flottantes.

Le rôle du « débordement : auto » dans la création d'un conteneur

Contrairement à la croyance populaire, « overflow : auto » n'efface pas les flotteurs. Au lieu de cela, il force l'élément parent à établir un nouveau contexte de formatage de bloc (BFC), contenant efficacement ses enfants flottants sans interférer avec les autres éléments du contexte parent.

Ce nouveau BFC oblige le parent à s'étirer pour enfermer l'élément parent. colonnes flottantes, résolvant le problème où la hauteur du wrapper ne s'ajustait pas automatiquement pour s'adapter à son contenu imbriqué. Pour des informations plus détaillées sur ce processus, reportez-vous aux ressources fournies dans la section réponses.

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!