Articles techniques liés à Float dans l'échange CSS_Experience

Le concept de Float est peut-être le concept le plus déroutant en CSS. Float est souvent mal compris et critiqué pour les problèmes de lisibilité et d'utilisabilité causés par le flottement de tous les éléments contextuels. Cependant, la cause première de ces problèmes n’est pas la théorie elle-même, mais l’interprétation de la théorie par les développeurs et les navigateurs.

Si vous lisez attentivement le concept flottant, vous constaterez que ce n'est pas aussi compliqué qu'il y paraît. La plupart des problèmes sont causés par les anciennes versions d'IE (je ne fais que deviner). Si vous connaissez ces bugs, vous pouvez éviter ces problèmes.

Essayons de résoudre ces problèmes et de dissiper certains malentendus antérieurs sur l'utilisation des flotteurs. Nous avons consulté des dizaines d’articles pertinents et sélectionné les plus importants que vous devez connaître.

Ce que vous devez savoir sur les flotteurs
---------------------------------- - ------------------------------------------------- - ----------------------

　 "La pratique des images et du texte environnants remonte à il y a longtemps. C'est pourquoi depuis Netscape1. 1. Cette fonctionnalité a été introduite pour la première fois dans les navigateurs, et c'est pourquoi CSS utilise l'attribut float pour l'implémenter. Le terme « Float » est référencé dans le document « Additions to HTML 2.0 » publié avec Netscape 1.1, décrivant un élément qui flotte. quelque chose. "Le positionnement de l'élément flottant est toujours basé sur le flux de documents normal, puis il est extrait du flux de documents et déplacé aussi loin que possible vers la gauche ou la droite. Autour de l'élément flottant. Lorsqu'un élément est extrait. à partir du flux de documents normal, les autres éléments toujours dans le flux de documents ignoreront l'élément et rempliront son espace d'origine. "

" L'élément pivotera automatiquement après avoir été flottant. L'élément peut être déplacé vers la gauche ou la droite de la ligne actuelle. Les attributs sont les suivants : float : left, float : right ou float : none »

« Vous devez définir ceci pour tous les éléments flottants. attribut (sauf s'il s'agit d'un élément , qui a une largeur implicite). Si la largeur n'est pas définie, le résultat sera imprévisible "

" Par exemple, les éléments flottants doivent avoir une largeur définie. propriétés, qu'elles soient explicitement spécifiées ou implicites. De plus, il remplit les éléments du conteneur aussi horizontalement que possible, comme s'il s'agissait de contenu non flottant, ne laissant aucune place à d'autres contenus pour les entourer, et dans le flux normal du document, les marges verticales. des éléments flottants ne se chevaucheront pas. Enfin, les éléments flottants peuvent se chevaucher avec des éléments adjacents au niveau du bloc dans le flux de documents normal (Annotation : les éléments flottants n'occupent aucun espace de flux de documents normal, il est donc recommandé de ne pas les comprendre comme tels. Chevauchement). , mais le concept de flottement.) "

"La première chose que nous devons garder à l'esprit est que les éléments flottants ne peuvent flotter que vers la gauche ou la droite, il n'y a rien de tel que flotter vers le milieu. les débutants font des erreurs. N'oubliez pas que la règle la plus élémentaire est que les éléments flottants ne peuvent flotter que des deux côtés. "

" Lorsque nous laissons un élément flotter, il flottera vers la droite ou vers la gauche jusqu'à ce qu'il le rencontre. bord du conteneur. Si nous faisons flotter un autre élément dans la même direction, il flottera jusqu'à ce qu'il touche le bord de l'élément précédemment flotté. Si nous faisons flotter plus d'éléments, ils seront disposés les uns après les autres, mais bientôt il n'y aura plus d'espace. . La ligne ne peut plus accueillir d'éléments flottants, et l'élément flottant suivant sera renvoyé dans une autre ligne et continuera à être organisé. "

Contenant des blocs ou des boîtes contenant : "Les éléments conteneurs font référence à des éléments au niveau de la ligne ou du bloc qui contiennent d'autres éléments enfants. . . . » 　　

　　　« Lorsqu'elle est explicitement spécifiée, la position verticale d'un élément flottant est déterminée par sa position d'origine dans le flux de documents, avec le haut aligné avec le haut de la ligne actuelle. Mais horizontalement, il se déplace le plus loin possible vers le bord de l'élément conteneur, tout en suivant le remplissage de l'élément conteneur. Les éléments en ligne de la même ligne sont disposés autour de l'élément flottant. "

"Étant donné que les éléments flottants n'occupent pas l'espace normal de flux de documents, les éléments de niveau bloc dont les positions ne sont pas explicitement spécifiées avant et après l'élément flottant occuperont la position où l'élément flottant devrait être, comme s'il avait n’a jamais existé. La ligne après l'élément flottant diminuera en largeur en fonction de l'élément flottant. Les éléments situés avant l'élément flottant seront réorganisés et occuperont une ligne distincte. (Annotation : ie et ff se comportent différemment dans ce cas)"

"S'il n'y a pas assez d'espace dans la direction horizontale de la ligne actuelle pour accueillir l'élément flottant, passez à la ligne suivante jusqu'à ce qu'il y ait de l'espace qui peut accueillir l'élément flottant. La rangée d'éléments. »

　 « Aucun élément flottant ne peut dépasser la limite supérieure de l'emplacement du document d'origine. Le haut d'un élément flottant doit être aligné avec le haut de la ligne actuelle (ou le bord inférieur de l'élément de niveau bloc précédent s'il n'y a aucun élément de ligne actuel). »

　« Pour vraiment comprendre la théorie des flotteurs, vous devez comprendre ce qu'est une boîte de ligne en CSS. Malheureusement, pour expliquer ce qu'est une ligne, vous devez d'abord comprendre ce qu'est un élément au niveau de la ligne.Les éléments de niveau ligne font référence aux éléments qui ne sont pas de niveau bloc, tels que . Row est un concept logique qui contient tous les éléments de niveau ligne qui composent la ligne. Sa hauteur est au moins égale. à ces éléments de niveau ligne. Le plus grand. »

　« Si on ajoute float: left à toutes les colonnes de la Div, elles seront disposées une à une vers la gauche. Si on veut avoir un footer en bas de page, on ne le fait pas. "L'utilisation d'éléments flottants pour contenir des éléments flottants présente un inconvénient potentiel, c'est-à-dire que la capacité de votre page à toujours maintenir une présentation cohérente dépendra de la navigateur. Si la mise en œuvre reste cohérente. Lorsque les éléments flottants font partie d’une mise en page plus complexe, ils deviennent encore plus vulnérables. »

Dégagement des flotteurs
------------------------------------- --- ----------------------------------------------- --- ---------------------

　"Les éléments après l'élément flottant entoureront automatiquement l'élément flottant. Si vous ne le souhaitez pas, vous pouvez appliquer l'attribut 'clear' à ces éléments. Cet attribut a 4 paramètres : clear : left, clear : right, clear : les deux ou clear : none »

Il existe de nombreuses techniques pour nettoyer les éléments flottants sans introduire de balises non sémantiques supplémentaires. Ci-dessous 3 méthodes plus courantes : a. ) Flottez les éléments du conteneur ensemble b) Utilisez overflow: caché sur les éléments du conteneur c) Utilisez des pseudo-classes CSS comme : after

"L'insertion d'un élément de nettoyage consiste à créer le conteneur. Pratique standard pour envelopper correctement tous les éléments flottants, cela a pour effet de « faire glisser » le bord inférieur du conteneur pour envelopper l'élément contenu. »

　« Pour les mises en page basées sur la conception flottante, un problème courant est que le conteneur de l'élément flottant ne se développe pas automatiquement pour contenir l'élément flottant. Si vous souhaitez ajouter une bordure autour de tous les éléments flottants (par exemple, une bordure autour d'un élément conteneur), vous devez explicitement commander au navigateur d'étirer le conteneur. Vous pouvez utiliser la méthode de débordement. »

Utiliser:after Imaginez que nous utilisions :after pour insérer un point et définir sa propriété {clear: Both;} C'est tout ce que vous avez à faire, mais personne n'acceptera le fond du conteneur. léger écart, nous devons donc également définir {height: 0;} et {visibility: Hidden;} pour garantir un ajustement parfait.