Pourquoi CSS a-t-il le problème de supprimer les flotteurs ?

La raison du problème de suppression des flotteurs en CSS : dans le flux standard, l'élément parent n'a pas d'attribut de hauteur défini et les éléments enfants de l'élément parent flottent puisque les éléments flottants ne sont plus. Occupant la position du flux de documents d'origine, la hauteur de l'élément flottant ne sera pas calculée dans la hauteur de l'élément parent, c'est-à-dire qu'elle apparaîtra réduite.

L'environnement d'exploitation de ce tutoriel : Système Windows 10, CSS3, cet article est applicable à toutes les marques d'ordinateurs.

1. Pourquoi le problème de dégagement des flotteurs se produit-il ?

(Recommandation vidéo d'apprentissage : tutoriel vidéo Java)

Si un élément parent n'a pas d'attribut de hauteur défini sous le flux standard, sa hauteur sera déterminée par le hauteur de l'élément enfant Open up, c'est-à-dire adaptatif. Mais si l'élément enfant de cet élément parent est flottant, puisque l'élément flottant n'occupe plus la position du flux de documents d'origine, la hauteur de l'élément flottant ne sera pas calculée dans la hauteur de l'élément parent, et la hauteur de l'élément l'élément parent sera 0, c'est-à-dire qu'il apparaîtra en état réduit. Afin de résoudre ce genre de problème, nous avons proposé de dégager le flotteur.

2. Comment utiliser CSS pour effacer les flottants ?

1. Ajoutez directement de la hauteur à l'élément parent

Mais cela ne s'applique pas lorsque la hauteur de l'élément flottant est incertaine

Utilisez directement clear : les deux

Ajoutez une balise de niveau bloc (p, div, etc.) directement au bas de l'élément parent, puis indiquez-la clear: les deux pour effacer le flottant.

Mais cela générera un grand nombre d'éléments vides inutiles, des ressources gaspillées, et n'est pas la solution optimale

3 Utilisez BFC :

(1) Qu'est-ce que BFC.

Traduit littéralement par « contexte de formatage au niveau du bloc ». Il s'agit d'une zone de rendu indépendante et d'un environnement de mise en page indépendant dans lequel la disposition des éléments n'est pas affectée par le monde extérieur. Dans un BFC, les zones de bloc et les zones de ligne (les zones de ligne sont composées de tous les éléments en ligne dans une rangée) seront disposées verticalement. le long de la bordure de son élément parent. BFC est un conteneur indépendant isolé sur la page. Les sous-éléments à l'intérieur du conteneur n'affecteront pas les éléments à l'extérieur. Et vice versa.

(2) Solution 1 :

Ajouter overflow: Hidden (tant qu'il n'est pas visible) au style de l'élément parent Après avoir ajouté cette instruction, un BFC sera créé et le flottant. les éléments seront piégés dans le BFC , pour l'empêcher de quitter le flux de documents, la hauteur de l'élément flottant sera d'abord calculée, puis masquée Lorsque l'élément parent obtiendra la hauteur, il se développera

(. 3) Solution 2 :

Ajouter float float: right à l'élément parent (tant que ce n'est pas none). L'ajout de cette instruction créera également un BFC. Le principe est le même, mais parfois nous ne le faisons pas. Je n'ai pas besoin de faire flotter l'élément parent, ce qui va à l'encontre de nos besoins

4. Utilisez la pseudo-classe

pour générer les éléments frères de l'élément flottant via le pseudo-élément ::after de. l'élément parent, puis utilisez la méthode clear:both sur les éléments frères.

Recommandations associées :

Tutoriel CSS

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!