Comment « overflow : auto » résout-il les problèmes d'affichage des flotteurs ?

Pourquoi le débordement : résout automatiquement les problèmes d'affichage des flotteurs

Lors de la création de plusieurs colonnes à l'aide d'éléments flottants, le problème courant survient lorsque le wrapper parent ne parvient pas à agrandir pour s'adapter à ses enfants flottants. Cela se produit parce que les flottants sont supprimés du flux de contenu régulier, ce qui oblige le wrapper à ignorer leur existence.

Pour résoudre ce problème, overflow: auto peut être appliqué au wrapper. Cette technique établit un nouveau contexte de formatage de bloc (BFC) pour les flottants, forçant le wrapper à les contenir. Les BFC établissent des limites qui empêchent les flottants d'interférer avec d'autres éléments dans leur contexte parent.

Il est crucial de noter que overflow: auto n'efface pas les flottants, car la suppression nécessite un élément de compensation dédié après le dernier élément flottant. Un élément parent ne peut pas effacer ses propres enfants flottants.

Overflow : auto crée un BFC en répondant aux critères suivants :

1. L'élément a une propriété de débordement (par exemple, overflow : auto) .
2. L'élément n'est pas positionné statiquement (position : static).

En satisfaisant ces conditions, l'élément wrapper crée un BFC, qui force le flottant les enfants doivent rester confinés dans ses limites, assurant un réglage correct de la hauteur pour accueillir les colonnes flottantes.

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!