Pourquoi le flotteur transparent de trop-plein n'a-t-il aucun effet ?

La raison pour laquelle le flotteur de compensation de débordement n'est pas valide peut être que la hauteur de l'élément flottant n'est pas définie, que l'élément flottant est effacé, que l'élément de compensation est avant l'élément flottant, que la hauteur de l'élément transparent n'est pas définie ou que le l'élément clear est après l'élément flottant, etc. Introduction détaillée : 1. La hauteur de l'élément flottant n'est pas définie. Lorsque la hauteur de l'élément flottant n'est pas définie, elle peut ne pas être effacée. La hauteur de l'élément flottant est déterminée par son contenu, donc si le contenu n'en a pas. height, l'élément flottant n'a pas non plus de hauteur ;2. Flottant L'élément est effacé, lorsque l'élément flottant est effacé, la propriété de débordement peut ne pas s'effacer, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

En CSS, l'attribut overflow est utilisé pour contrôler le débordement de contenu d'un élément. Cependant, lorsqu'un élément contient des éléments flottants, la propriété overflow peut ne pas effacer les éléments flottants. Voici quelques raisons :

1. La hauteur de l'élément flottant n'est pas définie :

Lorsque la hauteur de l'élément flottant n'est pas définie, elle peut ne pas être effacée. La hauteur d'un élément flottant est déterminée par son contenu, donc si le contenu n'a pas de hauteur, alors l'élément flottant n'a pas non plus de hauteur.

   .parent {
     overflow: hidden;
   }
   .child {
     float: left;
   }

Dans l'exemple ci-dessus, l'attribut overflow de l'élément .parent ne peut pas effacer le float de l'élément .child.

2. Les éléments flottants sont effacés :

Lorsque les éléments flottants sont effacés, l'attribut de débordement peut ne pas être effacé. Si un élément flottant est effacé, cela n’affectera pas les autres éléments.

   .parent {
     overflow: hidden;
   }
   .child {
     float: left;
     clear: both;
   }

Dans l'exemple ci-dessus, l'élément .child est effacé et l'attribut overflow de l'élément .parent ne peut pas effacer le float.

3. Éléments flottants avant d'effacer les éléments :

Lorsque les éléments flottants sont avant d'effacer les éléments, l'attribut de débordement peut ne pas être effacé. Si l'élément flottant précède l'élément effacé, l'élément effacé ne peut pas effacer le flottant.

   .parent {
     overflow: hidden;
   }
   .child {
     float: left;
   }
   .clear {
     clear: both;
   }

Dans l'exemple ci-dessus, l'élément .clear est après l'élément float et l'attribut overflow de l'élément .parent ne peut pas effacer le float.

4. La hauteur de l'élément effacé n'est pas définie :

Lorsque la hauteur de l'élément effacé n'est pas définie, l'attribut overflow peut ne pas pouvoir effacer le flottant. Si l'élément clear n'a pas de hauteur, cela n'affectera pas les autres éléments.

   .parent {
     overflow: hidden;
   }
   .child {
     float: left;
   }
   .clear {
     clear: both;
   }

Dans l'exemple ci-dessus, l'élément .clear n'a pas de hauteur définie et l'attribut overflow de l'élément .parent ne peut pas effacer le float.

5. Effacer l'élément après l'élément flottant :

Lorsque l'élément clair est après l'élément flottant, la propriété overflow peut ne pas effacer le flottant. Si l'élément de compensation vient après l'élément flottant, l'élément flottant ne peut pas être effacé.

   .parent {
     overflow: hidden;
   }
   .child {
     float: left;
   }
   .clear {
     clear: both;
   }

Dans l'exemple ci-dessus, l'élément .clear est après l'élément float et l'attribut overflow de l'élément .parent ne peut pas effacer le float.

Ces raisons peuvent empêcher l'attribut de débordement de vider le flotteur. En fonction des besoins spécifiques, la structure et le style de l'élément peuvent être ajustés pour obtenir des flotteurs clairs et efficaces.

Il convient de noter que la suppression des flottants peut entraîner des problèmes de disposition des éléments. Lorsque vous utilisez des flotteurs transparents, vous devez faire attention à la structure et au style des éléments pour éviter le chevauchement ou le désalignement des éléments.

En résumé, l'attribut overflow peut ne pas effacer le float car l'élément flottant n'a pas de hauteur définie, l'élément flottant est effacé, l'élément effacé est avant l'élément flottant, l'élément effacé n'a pas de hauteur définie ou l'élément effacé est après l'élément flottant. Une utilisation appropriée des flotteurs clairs peut éviter les problèmes de disposition des éléments. Si vous avez d'autres questions, n'hésitez pas à me le faire savoir.

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!