ATOZ CSS Astuce rapide: flottants et éléments clairs et centrés

Exclusivité de l'adhésion à la première place SitePoint: Tétoriels ATZ complets: CSS Series!

Chargez le joueur… Bienvenue dans nos tutoriels de la série AToz CSS! Dans cette série de tutoriels, nous explorerons diverses valeurs (et propriétés) de CSS qui commencent par différentes lettres dans l'alphabet. Dans cet article, j'ai ajouté un astuce / cours rapide sur les attributs de flotteur et de clairs et diverses méthodes de centrage des éléments.

F signifie flotteur et clair

Le flottement est utile si vous souhaitez déplacer des éléments vers la gauche ou la droite de la page, mais malheureusement, vous ne pouvez pas utiliser float: center pour centrer l'élément. N'est-ce pas très gênant? Ne vous inquiétez pas, voici les méthodes de centrage de divers éléments.

Technique 1

Si l'élément est un élément de niveau bloc, vous pouvez utiliser width et margin: auto en combinaison. margin: auto calcule automatiquement les marges sur les côtés gauche et droit pour les rendre égaux, centrant ainsi l'élément de bloc dans son élément de conteneur. Consultez l'exemple écrit par SitePoint (@SitePoint) sur Codepen: Tip-Margin-Auto.

Technique 2

Si l'élément est un élément en ligne (ou bloc en ligne), utilisez text-align: center sur son conteneur parent. Consultez l'exemple écrit par SitePoint (@SitePoint) sur Codepen: Tip-FlexBox.

Technique 3

Si l'élément est absolument positionné, utilisez left et transform pour centrer l'élément horizontalement. Consultez l'exemple écrit par SitePoint (@SitePoint) sur Codepen: Tip-FlexBox.

Des techniques similaires peuvent également être utilisées pour des éléments de centrage vertical, mais d'autres seront introduits dans les futurs conseils!

Technique 4

Utilisez Flexbox (un autre attribut "F", génial!) Pour utiliser Flexbox pour centrer un seul projet (ou groupe de projet), vous devez définir deux propriétés sur l'élément de conteneur: display: flex et justify-content: center. Consultez l'exemple écrit par SitePoint (@SitePoint) sur Codepen: Tip-FlexBox.

Flexbox possède de nombreuses autres fonctionnalités intéressantes, notamment des éléments de contenant en croissance ou en rétrécissement pour utiliser au mieux l'espace disponible. Vous pouvez même aligner les éléments verticalement et horizontalement en même temps sans utiliser les éléments au niveau du bloc et en ligne, qui déterminent respectivement l'alignement vertical ou horizontal. Un autre avantage de l'utilisation de Flexbox est qu'il n'y a plus le problème du repliement des conteneurs et la nécessité d'utiliser une solution Clearfix.

Les questions fréquemment posées sur CSS flottent et effacent

Quel est le but de l'attribut Float dans CSS?

L'attribut

dans le float CSS est utilisé pour pousser un élément vers la gauche ou la droite, permettant à d'autres éléments de l'entourer. Il s'agit d'un outil puissant qui peut être utilisé pour créer une disposition Web entière ou certaines parties d'une page Web, telles que l'enveloppe de texte autour d'une image. Cependant, il convient de noter que les éléments flottants sont supprimés du processus normal de la page Web, et s'il n'est pas géré correctement, cela peut parfois conduire à des résultats de mise en page inattendus.

Comment centrer des éléments flottants dans CSS?

Les éléments flottants de centrage dans CSS peuvent être un peu délicats car l'attribut float lui-même ne prend pas en charge l'alignement du centrage. Cependant, il existe des solutions de contournement pour y parvenir. Une approche commune consiste à utiliser un wrapper ou un élément parent avec une largeur et une marge spécifiées définies sur auto. Une autre approche consiste à utiliser les dispositions Flexbox ou Grid, qui fournissent plus de contrôle sur l'alignement du projet et l'allocation de l'espace dans les conteneurs.

Quelle est la fonction de l'attribut clair dans CSS?

L'attribut

dans clear CSS est utilisé avec l'attribut float. Il spécifie quels côtés de l'élément ne sont pas autorisés à flotter. Les valeurs de l'attribut clear sont none, left, right, both, inherit et

. Cette propriété est généralement utilisée pour empêcher les éléments d'origine des éléments flottants.

Pourquoi mes éléments flottants ne sont-ils pas correctement alignés?

Si vos éléments flottants ne sont pas alignés comme prévu, cela peut être dû à plusieurs raisons. Un problème commun est que la largeur totale de l'élément flottant (y compris les marges, les remplissages et les bordures) dépasse la largeur de son élément de conteneur. Un autre problème peut être que tous les éléments ne flottent pas dans la même direction. N'oubliez pas non plus que les éléments flottants sont supprimés du flux normal du document, ce qui peut parfois conduire à des résultats inattendus.

Comment nettoyer les flottements dans CSS?

clear Vous pouvez utiliser l'attribut clear pour effacer les flottants dans CSS. Ceci est généralement nécessaire lorsque le conteneur contient des éléments flottants et que vous ne voulez pas que d'autres éléments du conteneur entourent des éléments flottants. Vous pouvez effacer le flotteur en ajoutant un nouvel élément à la fin du conteneur et en définissant l'attribut clear à "les deux". Alternativement, vous pouvez utiliser un hack Clearfix, qui implique l'application d'un pseudo-élément avec un attribut

au conteneur lui-même.

Puis-je utiliser l'attribut Float avec Flexbox ou Dayout Grid?

float Bien que vous puissiez techniquement utiliser l'attribut float avec la disposition FlexBox ou la grille, cela n'est pas recommandé. En effet, les dispositions Flexbox et Grid fournissent leur propre mécanisme pour aligner et allouer l'espace aux articles dans les conteneurs, ce qui peut entrer en conflit avec le comportement de l'attribut float. Si vous utilisez des dispositions FlexBox ou Grid, il est préférable d'utiliser leurs propriétés sur eux au lieu de

.

Quelles sont les alternatives à l'utilisation de l'attribut CSS Float?

float Bien que l'attribut

soit un outil puissant dans CSS, il existe des alternatives qui offrent plus de contrôle et de flexibilité. Ceux-ci incluent Flexbox, la disposition de la grille et le positionnement CSS. Flexbox permet l'alignement facile et l'allocation de l'espace pour les projets dans les conteneurs, tandis que les dispositions de grille sont idéales pour créer des dispositions 2D complexes. Le positionnement du CSS peut également être utilisé pour contrôler la disposition de chaque élément.

Comment l'attribut Float affecte-t-il le flux du document?

Lorsque l'élément flotte, il sera supprimé du flux normal du document et se déplacera à gauche ou à droite autant que possible. D'autres éléments du document circuleront autour de l'élément flottant. Cela peut parfois conduire à des résultats inattendus, surtout si l'élément flottant est plus large que son élément de conteneur, ou s'il y a plusieurs éléments flottants avec différentes largeurs.

Puis-je faire flotter l'élément vers le centre?

L'attribut

dans float dans CSS ne prend pas en charge l'alignement du centrage. Il permet aux éléments de flotter à gauche ou à droite uniquement. Cependant, vous pouvez obtenir un effet similaire en utilisant un wrapper ou un élément parent avec une largeur et une marge spécifiées sur auto. Alternativement, vous pouvez utiliser des dispositions Flexbox ou Grid qui fournissent plus de contrôle sur l'alignement.

Que se passe-t-il si je ne nettoie pas le flotteur?

Si vous ne dégagez pas le flotteur, cela peut conduire à des résultats de mise en page inattendus. Par exemple, si l'élément parent ne contient que des éléments flottants, il peut s'effondrer car l'élément flottant a été supprimé du flux normal du document. D'autres éléments du document peuvent également entourer des éléments flottants d'une manière à laquelle vous ne vous attendez pas. Par conséquent, il est généralement préférable d'effacer le flotteur si nécessaire.

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!