Pourquoi les éléments flottants s'étendent-ils au-delà des limites de leur division et comment puis-je y remédier ?

Éléments flottants dépassant les limites du div : causes et solutions

Lors du placement d'éléments dans un div et de la définition d'une largeur spécifique pour le div, comportement inattendu peut se produire lorsque des éléments flottants s'étendent au-delà des limites du div. Cela se produit en raison de la nature inhérente du flotteur, qui supprime l'élément du flux normal.

Raison du problème

Lorsqu'un élément flotte, il est supprimé. du flux de documents et positionné à gauche ou à droite du div contenant. Par conséquent, les éléments flottants n'affectent pas la hauteur ou la largeur du conteneur div car ils ne sont pas considérés comme faisant partie de son contenu.

Solutions pour étirer les éléments flottants

Il y a Il existe plusieurs façons de résoudre ce problème et de garantir que les éléments flottants étendent la hauteur du div contenant :

1. Définissez la propriété Overflow sur "hidden"

Ajoutez le CSS suivant au div parent :

#parent {
  overflow: hidden;
}

En définissant overflow : masqué, le div parent se développera pour s'adapter à son contenu, y compris les éléments flottants.

2. Faites flotter le div parent

Flottez également le div parent en ajoutant le CSS suivant :

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

Flotter le div parent permet à ses enfants flottants d'étirer sa hauteur.

3. Utilisez un élément clair

Insérez un élément clair dans le div parent immédiatement après les éléments flottants :

<div>

Styles CSS pour l'élément clair :

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

L'élément clear force les éléments flottants à commencer au début de la ligne suivante, permettant au div parent de s'étirer pour les accueillir.

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!