Qu'est-ce que float ? Comment CSS efface-t-il float ?

Cet article vous présente ce qu'est le flottant ? Le principe du clearing CSS flottant (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, en étudiant CSS, j'ai découvert que les flotteurs doivent être effacés lorsque la hauteur s'effondre. Afin de comprendre le principe des flotteurs, j'ai recherché de nombreuses informations sur Internet et j'ai découvert qu'ils étaient. n'étaient pas très clairs, et ils avaient tous le même contenu. Je partage ici ma compréhension du principe du flottement clair,

Si vous savez déjà très bien ce qui flotte et l'effet du flottement vous pouvez accéder directement à 3. Comment effacer les flotteurs (points clés) Lire

1. Qu'est-ce que float
Nous devons d'abord connaître le positionnement
La position de l'élément sur la page est le positionnement Avant de résoudre le problème, comprenons d'abord plusieurs méthodes de positionnement
1. positionnement de flux statique (méthode par défaut)
Positionnement de flux ordinaire, également connu sous le nom de positionnement de flux de documents, c'est la méthode de positionnement par défaut pour les éléments de page
Éléments de niveau bloc sur la page : disposés un par un à partir du haut vers le bas
Éléments en ligne sur la page : un par un de gauche à droite Disposition
Mais comment afficher plusieurs éléments au niveau bloc sur une seule ligne
Voici le positionnement flottant
2 ? , positionnement flottant float
La valeur de l'attribut float est gauche/droite
Cet attribut n'était pas utilisé à l'origine pour la mise en page, mais pour l'habillage du texte. Mais plus tard, les gens ont découvert qu'il était également bon pour la mise en page, alors ils l'ont conservé. en l'utilisant. Parfois, ils ont même oublié de l'utiliser pour l'habillage du texte
3. Positionnement relatif relatif
L'élément sera décalé d'une certaine distance par rapport à sa position d'origine. , l'espace d'origine de l'élément sera toujours conservé
Attribut : position
Valeur : relative
Utilisez l'attribut offset (haut/droite/bas/gauche) pour changer la position
4 .Positionnement absolu absolu
Si l'élément est défini sur un positionnement absolu Si tel est le cas, il aura les caractéristiques suivantes
1. Hors du flux de documents - n'occupe pas l'espace de la page
2. Élément fixe position via l'attribut offset
3. Position fixe par rapport à l'élément ancêtre positionné le plus proche
　4. S'il n'y a pas d'élément ancêtre positionné, alors la position est fixe par rapport au bloc contenant d'origine (corps, html)
Attribut : position
Valeur : absolue
Coordonnés avec les attributs de décalage (haut/droite/bas/gauche) pour obtenir une position fixe
5. Positionnement fixe fixe
Fixer l'élément en un point. certaine position sur la page et ne se produira pas avec la barre de défilement Mouvement de position
Attribut : position
Valeur : fixe
Utilisé avec l'attribut de décalage (haut/droite/bas/gauche) pour obtenir une position fixe

2. L'effet du flottement
　Que se passera-t-il après avoir flotté ?
1. Les éléments positionnés flottants seront exclus du flux de documents - hors du flux de documents (n'occupent pas l'espace de la page), et d'autres éléments doivent s'avancer pour remplir l'espace
2. Éléments flottants sera ancré à l'élément parent à gauche ou à droite, ou ancré au bord d'autres éléments flottants (les éléments ne peuvent flotter que dans la ligne actuelle)
　3. Les éléments flottants sont toujours situés dans l'élément parent
　4 . Problèmes de traitement des éléments flottants - résolus Problèmes d'affichage de plusieurs éléments de niveau bloc sur une seule ligne
Remarque
1. Lorsque tous les éléments flottants ne peuvent pas être affichés sur une ligne, le dernier sera renvoyé sur une autre ligne 2. Une fois l'élément flottant, la largeur deviendra adaptative (la largeur est déterminée par le contenu)
3. Une fois l'élément flottant, il deviendra un élément de niveau bloc, en particulier pour les éléments en ligne, qui a le plus grand impact
Éléments au niveau du bloc : permettent de modifier la taille
Éléments en ligne : la modification de la taille n'est pas autorisée
4. Le texte, les éléments en ligne et les éléments de bloc en ligne sont disposés de manière environnante. ne sera pas supprimé par les éléments flottants et évitera intelligemment les éléments flottants
Quel impact y aura-t-il après le flottement ?
Puisque l'élément flottant se détachera du flux documentaire, il n'occupera pas l'espace de la page, il aura donc un certain impact sur la hauteur de l'élément parent. Si tous les éléments contenus dans un élément sont des éléments flottants, alors la hauteur de l'élément deviendra 0 (hauteur réduite)

3. Comment effacer les flottants (souligné)

Analyse des solutions et des principes

Il existe de nombreuses méthodes sur Internet. Je ne présenterai ici qu'une seule méthode très utile, à savoir. pour définir le nom de la classe. Le principe de clearfix

est le suivant : si tous les éléments enfants flottent, l'élément parent s'effondrera, ajoutez donc un élément non flottant après tous les éléments enfants flottants pour soutenir l'élément parent. être trouvé et n'occupe pas d'espace, il ne peut donc pas être autorisé à y accéder. Il y a du contenu à l'intérieur, mais s'il y a du contenu, il doit être caché

.clearfix:after{content:'.';
　　　　　　　　　　clear:both;
　　　　　　　　　　display:block;
　　　　　　　　　　height:0;
　　　　　　　　　　overflow:hidden;
　　　　　　　　　　visibility:hidden;
　　　　　　　　}.clearfix:after{zoom：1；}/*解决IE的问题*/
//visibility：hidden；隐藏元素，但是位置留着
//display：none；隐藏元素，不占据空间，彻底隐藏
//after：伪对象选择符

Articles connexes recommandés :

Qu'est-ce que l'attribut transform-origin en CSS le fait-il ? Le rôle de l'attribut transform-origin

Un exemple de création d'une ligne de connexion Lightning à l'aide du langage 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!