Une brève analyse du flottement et du nettoyage en CSS

En tant que front-end, j'ai écrit beaucoup de mises en page, mais le flottant a toujours été un angle mort que je comprends à peine. D'une part, le flottant peut être utilisé pour réaliser de nombreuses mises en page, mais d'autre part. , l'impact du flottement détruira la mise en page et provoquera des maux de tête, donc aujourd'hui, j'écrirai un article de blog pour remédier à cet angle mort.

Cet article aborde principalement les questions suivantes :
1. Le but initial du flottement
2 Pourquoi le flottement a un effet d'habillage du texte
3 Comment nettoyer l'impact du flottement<.>

Le but initial de float

Le contenu suivant provient de "Recherche approfondie, explication détaillée et expansion de CSS Float (1)" de Zhang Xinxu :

Supposons qu'il n'y ait pas d'attribut float dans CSS now ( float), à quoi ressemblera-t-il. Nous constaterons que, qu'il s'agisse de la disposition des colonnes ou de la disposition des listes qui est actuellement couramment implémentée à l'aide de la méthode flottante, nous pouvons utiliser d'autres propriétés CSS (indépendamment du tableau) pour l'implémenter. La seule chose qui ne peut pas être implémentée est le "texte entourant les images". ". Je ne vois aucun moyen d'enrouler le texte autour de l'image. Eh bien, ce rôle irremplaçable est la véritable signification de float.

Pour résumer en une phrase :

Obtenez l'effet du texte entourant l'image.

Pourquoi le flottant a-t-il un effet d'habillage du texte ?

Cette question vient principalement d'impressions passées :

Les éléments flottants sont séparés du document couler.

Hein ? Si vous êtes hors du flux de documents, ne devrait-il pas chevaucher les éléments non flottants ci-dessous. Pourquoi le texte peut-il toujours vous envelopper ?

Ce problème m'a dérangé jusqu'à ce que je voie le livre "Mastering CSS". L'article écrit :

Le flottement entraînera la rupture des éléments du flux de documents et n'affectera plus les éléments non flottants. En fait, pas entièrement. Si l'élément flottant est suivi d'un élément dans le flux documentaire, alors

la case de cet élément se comportera comme si le flottant n'existait pas du tout . Cependant, le contenu du texte de la zone est affecté par l'élément flottant et se déplace pour libérer de l'espace.

En d'autres termes, l'élément flottant

est effectivement hors du flux de documents, donc la zone de bloc dans le flux de documents ignorera l'élément flottant, mais pas le texte . Ceci est différent du positionnement absolu en dehors du flux de documents.

La réponse du senior Zhang Qiuyi sur Zhihu confirme également ce point de vue.

Un point supplémentaire : le terme flux de documents est en fait inexact. Dans la norme W3C, il n'y a qu'un flux normal, mais de nombreux articles nationaux et livres traduits utilisent le flux de documents au fil du temps.

Comment nettoyer l'impact causé par le flottement

En fait, le principal impact causé par le flottement est

1 La hauteur de l'élément parent s'effondre en raison de la rupture de l'élément. du flux normal

2. Ci-dessous, les éléments non textuels se chevauchent avec les éléments flottants, détruisant la mise en page originale

Pour nettoyer ces effets, de nombreuses personnes savent utiliser l'attribut clear. Pourquoi effacer les flottants ?

Il y a deux opinions :

1. Le navigateur
ajoute suffisamment de marges au-dessus de l'élément clear pour que la bordure supérieure de l'élément descende verticalement jusqu'au bord extérieur inférieur de l'élément clear. élément flottant en dessous de la distance. 2.
Ajoutez un espace libre au-dessus de la marge supérieure de l'élément clair, tandis que la marge elle-même ne change pas.

Le premier est le principe d'implémentation de CSS1 et CSS2, et le second est le principe d'implémentation de CSS2.1. Mais quel que soit le résultat obtenu, un espace vertical est laissé aux éléments flottants, ce qui semble effacer l'effet flottant. Dans le même temps, l'espace rempli au-dessus de l'élément transparent défini est effectivement présent dans le flux normal. Par conséquent, la hauteur de l’élément parent est étirée.

Il existe en fait de nombreuses façons de nettoyer les flotteurs. Dans l'article "Les flotteurs que nous avons nettoyés ensemble au cours de ces années", les méthodes de nettoyage des flotteurs sont simplement divisées en deux catégories :

1 En ajoutant un élément vide à la fin de l'élément flottant, set clear: les deux attributs, le pseudo-élément after génère en fait un élément de niveau bloc avec un contenu point derrière l'élément via content; 2. Fermez le float en définissant l'attribut overflow ou display: table de l'élément parent.

Presque toutes les méthodes de suppression des flotteurs peuvent être classées dans ces deux catégories. Parlons de la méthode d'ajout de pseudo-éléments en conjonction avec l'article de blog ci-dessus :

1.affichage : block , afin que les éléments générés soient affichés en tant qu'éléments de niveau bloc et occupent l'espace restant.

2. Ajoutez un point dans le contenu car ce caractère est très petit.

3. Définissez la hauteur sur 0, car vous ne voulez pas que ce nouveau contenu occupe de l'espace et détruise la hauteur de la mise en page.
4. Définissez la visibilité sur masqué pour rendre le contenu généré invisible, permettant aux parties qui peuvent être couvertes par le contenu généré d'être cliquables et interactives.
5.clear : Les deux suppriment les effets du flottement

Le code est le suivant :

Cette méthode est efficace dans la plupart des navigateurs modernes et est également recommandée. Quant aux autres méthodes, il en existe de nombreuses en ligne, je n’entrerai donc pas dans les détails ici.

.clearfix:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

Cet article s'appuie sur d'autres blogs et documents, avec des liens joints :

Liens de référence :

Propriété d'effacement CSS

Flotteur CSS

Comprendre les flotteurs CSS et les flotteurs de compensation

Les flotteurs que nous avons effacés ensemble au cours de ces années

flux noraml

Recherche approfondie, explication détaillée et expansion des flotteurs CSS (1 )

Réponse de Zhang Qiuyi

En tant que front-end, j'ai écrit beaucoup de mises en page, mais le flottant a toujours été un angle mort que je comprends à peine. D'une part, le flottant peut être utilisé pour réaliser de nombreuses mises en page, mais d'autre part. , l'impact du flottement détruira la mise en page et provoquera des maux de tête, donc aujourd'hui, j'écrirai un article de blog pour remédier à cet angle mort.

Cet article aborde principalement les questions suivantes :
1. Le but initial du flottement
Pourquoi le flottement a un effet d'habillage du texte
3 Comment nettoyer l'impact du flottement<.>

Le but initial de float

Le contenu suivant provient de "Recherche approfondie, explication détaillée et expansion de CSS Float (1)" de Zhang Xinxu :

Supposons qu'il n'y ait pas d'attribut float dans CSS now ( float), à quoi ressemblera-t-il. Nous constaterons que, qu'il s'agisse de la disposition des colonnes ou de la disposition des listes qui est actuellement couramment implémentée à l'aide de la méthode flottante, nous pouvons utiliser d'autres propriétés CSS (indépendamment du tableau) pour l'implémenter. La seule chose qui ne peut pas être implémentée est le "texte entourant les images". ". Je ne vois aucun moyen d'enrouler le texte autour de l'image. Eh bien, ce rôle irremplaçable est la véritable signification de float.

Pour résumer en une phrase :

Obtenez l'effet du texte entourant l'image.

Pourquoi le flottant a-t-il un effet d'habillage du texte ?

Cette question vient principalement d'impressions passées :

Les éléments flottants sont séparés du document couler.

Hein ? Si vous êtes hors du flux de documents, ne devrait-il pas chevaucher les éléments non flottants ci-dessous. Pourquoi le texte peut-il toujours vous envelopper ?

Ce problème m'a dérangé jusqu'à ce que je voie le livre "Mastering CSS". L'article écrit :

Le flottement entraînera la sortie des éléments du flux de documents et n'affectera plus les éléments non flottants. En fait, pas entièrement. Si l'élément flottant est suivi d'un élément dans le flux documentaire, alors

la case de cet élément se comportera comme si le flottant n'existait pas du tout . Cependant, le contenu du texte de la zone est affecté par l'élément flottant et se déplace pour libérer de l'espace.

En d'autres termes, l'élément flottant

est effectivement hors du flux de documents, donc la zone de bloc dans le flux de documents ignorera l'élément flottant, mais pas le texte . Ceci est différent du positionnement absolu en dehors du flux de documents.

La réponse du senior Zhang Qiuyi sur Zhihu confirme également ce point de vue.

Un point supplémentaire : le terme flux de documents est en fait inexact. Dans la norme W3C, il n'y a qu'un flux normal, mais de nombreux articles nationaux et livres traduits utilisent le flux de documents au fil du temps.

Comment nettoyer l'impact causé par le flottement

En fait, le principal impact causé par le flottement est

1 La hauteur de l'élément parent s'effondre en raison de la rupture de l'élément. du flux normal

2. Ci-dessous, les éléments non textuels se chevauchent avec les éléments flottants, détruisant la mise en page originale

Pour nettoyer ces effets, de nombreuses personnes savent utiliser l'attribut clear. Pourquoi effacer les flottants ?

Il y a deux opinions :

1. Le navigateur
ajoute suffisamment de marges au-dessus de l'élément clear pour que la bordure supérieure de l'élément descende verticalement jusqu'au bord extérieur inférieur de l'élément clear. élément flottant en dessous de la distance. 2.
Ajoutez un espace libre au-dessus de la marge supérieure de l'élément clair, tandis que la marge elle-même ne change pas.

Le premier est le principe d'implémentation de CSS1 et CSS2, et le second est le principe d'implémentation de CSS2.1. Mais quel que soit le résultat obtenu, un espace vertical est laissé aux éléments flottants, ce qui semble effacer l'effet flottant. Dans le même temps, l'espace rempli au-dessus de l'élément transparent défini est effectivement présent dans le flux normal. Par conséquent, la hauteur de l’élément parent est étirée.

Il existe en fait de nombreuses façons de nettoyer les flotteurs. Dans l'article "Les flotteurs que nous avons nettoyés ensemble au cours de ces années", les méthodes de nettoyage des flotteurs sont simplement divisées en deux catégories :

1 En ajoutant un élément vide à la fin de l'élément flottant, set clear: les deux attributs, le pseudo-élément after génère en fait un élément de niveau bloc avec un contenu de points derrière l'élément via content; 2. Fermez le float en définissant l'attribut overflow ou display: table de l'élément parent.

Presque toutes les méthodes de suppression des flotteurs peuvent être classées dans ces deux catégories. Parlons de la méthode d'ajout de pseudo-éléments en conjonction avec l'article de blog ci-dessus :

1.affichage : block , afin que les éléments générés soient affichés en tant qu'éléments de niveau bloc et occupent l'espace restant.

2. Ajoutez un point dans le contenu car ce caractère est très petit.

3. Définissez la hauteur sur 0, car vous ne voulez pas que ce nouveau contenu occupe de l'espace et détruise la hauteur de la mise en page.
4. Définissez la visibilité sur masqué pour rendre le contenu généré invisible, permettant aux parties qui peuvent être couvertes par le contenu généré d'être cliquables et interactives.
5.clear : Les deux suppriment les effets du flottement

Le code est le suivant :

Cette méthode est efficace dans la plupart des navigateurs modernes et est également recommandée. Quant aux autres méthodes, il en existe de nombreuses en ligne, je n’entrerai donc pas dans les détails ici.

.clearfix:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

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!