Comment « overflow : auto » efface-t-il comme par magie les flotteurs et résout-il les problèmes de hauteur ?

Débordement : Auto Magic : suppression des flotteurs et résolution des problèmes de hauteur

Votre dilemme découle du comportement par défaut des éléments flottants, qui sont supprimés de le flux de mise en page standard, provoquant un comportement anormal de la hauteur de l'élément conteneur.

Pourquoi le débordement : auto Étire les emballages

Débordement : l'auto n'efface pas directement les flotteurs ; au lieu de cela, il établit un nouveau contexte de formatage de bloc (BFC) pour l'élément wrapper. Ce BFC a les effets suivants :

• Empêche les enfants flottants de s'échapper de l'emballage.
• Force l'emballage à établir une hauteur pour contenir ses flotteurs.

Ce confinement permet à l'enveloppe de se dilater et de s'adapter autour des colonnes flottantes, résolvant ainsi la hauteur problème.

Pourquoi avez-vous besoin de flotteurs clairs ?

Les éléments flottants ne sont exemptés du flux normal qu'au sein de leur élément parent. Si vous souhaitez déplacer le contenu situé sous un flottant vers sa propre ligne, vous avez besoin d'un élément supplémentaire, appelé élément « clair ». Cet élément a pour but explicite de vider l'espace résiduel après le flottant et de démarrer une nouvelle ligne.

Dans votre exemple, overflow: auto établit un BFC, contenant effectivement les flottants. Cependant, si vous avez d'autres éléments après les flottants, ils risquent de ne pas s'écouler correctement sans un élément clair explicite.

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!