Pourquoi une division parentale a-t-elle une hauteur nulle avec des enfants flottants ?

Comprendre la hauteur d'une division parent avec des enfants flottants

Dans le contexte de la conception Web, la hauteur d'un conteneur div peut être influencée par ses éléments enfants. Cependant, lorsque ces éléments enfants flottent, un comportement inattendu peut se produire, entraînant un div parent avec une hauteur nulle.

Pour illustrer cela, considérons le CSS suivant :

Lorsque vous créez du HTML en utilisant ce CSS, par exemple :

Vous remarquerez peut-être que la page s'affiche correctement, mais lorsque vous inspectez le DOM, le div "#wrapper" semble avoir une hauteur de 0px. En effet, le contenu flottant se supprime du flux normal du document, étant essentiellement supprimé de l'arborescence du document.

La conséquence de ceci est que la hauteur du div parent n'est pas influencée par ses enfants flottants. Par conséquent, le div parent reste à sa hauteur par défaut de 0px.

Pour résoudre ce problème et garantir que le div parent se développe pour englober son contenu flottant, vous pouvez utiliser la propriété "overflow: Hidden" sur le parent. div. Cela crée un nouveau "contexte de formatage de bloc", qui oblige les enfants flottants à rester dans les limites du parent.

Voici le CSS mis à jour :

Avec cette modification, le "#wrapper " div va maintenant s'étirer pour s'adapter à ses enfants flottants, permettant à la mise en page de la page de se comporter comme prévu.

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!