Astuce CSS : fermer le conteneur parent après que l'élément enfant ait flotté

Au cours des deux derniers mois, j'ai travaillé par intermittence en tant qu'artiste sur plusieurs sites Web. Ce faisant, j'ai acquis une meilleure compréhension du développement standard de DIV+Css. Il y a deux choses qui m'ont le plus gagné. L'une est que j'ai complètement compris le modèle CSS Box, et l'autre est que j'ai résolu le problème des "éléments flottants fermés" qui me dérangeait depuis longtemps :

De manière générale, si un élément enfant utilise float, l'élément parent ne peut pas toujours savoir exactement où se termine l'élément enfant, donc la bordure inférieure de l'élément parent passe toujours par le milieu ou même le haut de l'élément enfant, ce qui semble très inconfortable.

Au début, j'ai ajouté un
ou

après l'élément enfant et défini son attribut sur "clear:all;", mais cela nécessiterait beaucoup d'espaces inutiles, et même certains sites Web. Il est nécessaire de modifier le code ASP pour ajouter automatiquement ces balises vides, ce qui ne peut être considéré qu'en dernier recours.

Plus tard, j'ai découvert que lorsque la balise parent est également définie pour flotter, elle peut être fermée à la bonne position, j'ai donc fait flotter la balise parent facilement, de cette façon, une grande partie du code ASP n'a pas besoin d'être modifiée. la nécessité d'ajouter l'attribut Clear Si la balise vide ne peut pas être ajoutée à partir du modèle mais doit être ajoutée à partir du code ASP, il n'est pas nécessaire de modifier le code ASP. Il vous suffit de définir le conteneur parent sur flottant si vous le souhaitez. il est toujours nécessaire de modifier l'ASP, puis de modifier le paramètre du conteneur parent. Définir le conteneur parent sur flottant et le faire flotter couche par couche résoudra toujours le problème. Bien que cela puisse éviter bien des problèmes, cela peut facilement remplir la page entière d'éléments flottants, -_- !!! Cela ne peut être considéré que comme une stratégie intermédiaire.

Plus tard, alors que je cherchais autre chose sur Internet, j'ai accidentellement trouvé quelqu'un qui m'a dit que le simple fait d'ajouter les deux propriétés suivantes aux propriétés CSS du conteneur parent résoudrait le problème :

débordement : automatique ;

_hauteur : 1 % ;

Je l'ai essayé et cela a très bien fonctionné. De cette façon, cela devrait être considéré comme la meilleure façon de résoudre ce problème à l'heure actuelle : il n'est pas nécessaire de modifier la tâche de la page, et il n'est fondamentalement pas nécessaire de modifier le parent. conteneur - même le conteneur parent du conteneur parent. Si vous apportez des modifications, ajoutez simplement deux attributs indifférents au conteneur parent et vous avez terminé.