Pourquoi les éléments flottants débordent-ils de leur division contenant et comment puis-je y remédier ?

Confinement d'évasion d'éléments flottants : dépannage des débordements de division

Lorsque vous travaillez avec des flottants au sein d'un div, vous pouvez rencontrer un problème où les éléments flottants s'étendent au-delà les limites de leur div contenant. Cette disparité dans les dimensions peut perturber la mise en page souhaitée.

Cause fondamentale :

Les flottants sont supprimés du flux normal du document, créant un espace dans l'élément parent. Par la suite, le contenu non flottant s'ajustera pour remplir cet espace libéré, ce qui entraînera un div plus petit qui ne parviendra pas à englober les éléments flottants.

Solution 1 : Contrôle de débordement

• Ajouter un débordement : caché au div parent :

#parent { overflow: hidden }

Cela empêche le débordement de éléments flottants et garantit qu'ils restent dans les limites de la div. Cependant, il peut couper le contenu qui s'étend au-delà de la hauteur du div.

Solution 2 : Flotter le div parent

• Flotter le div parent :

#parent { float: left; width: 100% }

Cela permet au div parent de s'étirer verticalement pour s'adapter au contenu flottant. Assurez-vous que la largeur du div est définie sur une valeur ou un pourcentage fixe pour éviter une expansion infinie.

Solution 3 : Effacer l'élément

• Utilisez un élément clair sous le contenu flottant :

<div class="parent">
  <img class="floated_child" src="..." />
  <span class="clear"></span>
</div>

span.clear { clear: left; display: block; }

L'élément clear agit comme une sentinelle, forçant le contenu suivant à démarrer sur une nouvelle ligne sous le contenu flottant, rétablissant les dimensions correctes du div.

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!