Introduction à la définition et à l'utilisation du flottant et du positionnement CSS

---

1. Flottants

1. Éléments flottants

1 Pour les éléments flottants, il y a quelques points à retenir :
Tout d'abord, cela. apparaîtra d'une manière ou d'une autre. La méthode supprime les éléments flottants du flux normal du document, mais cela affectera toujours la mise en page
2. En adoptant la méthode unique de CSS, les éléments flottants sont presque "dans un groupe à part" ; , mais ils affectent toujours le reste du document ;
3 Lorsqu'un élément flotte, d'autres éléments "entourent" l'élément. Les marges autour des éléments flottants ne sont pas fusionnées.
4. Non flottant : float:none est utilisé pour empêcher les éléments de flotter.

2. L'histoire intérieure détaillée du flottant

Avant de comprendre le contenu du flottement en détail, nous devons d'abord savoir ce qu'est un bloc contenant.
Le bloc conteneur d'un élément flottant est son ancêtre au niveau du bloc le plus proche.
css fournit une série de règles pour contrôler le placement des éléments flottants :

• La limite extérieure gauche (ou droite) d'un élément flottant ne peut pas dépasser le bord gauche (ou droit) de son bloc contenant) limite intérieure ;

• La limite extérieure gauche (ou droite) de l'élément flottant doit être la limite extérieure droite (ou gauche) de l'élément flottant gauche (ou flottant droit). ) élément qui apparaissait précédemment dans le document source, à moins que le haut du dernier élément flottant soit en dessous du bas du premier élément flottant.

• La bordure extérieure droite d'un élément flottant à gauche ne sera pas à droite de la bordure extérieure d'un élément flottant à droite à sa droite.

• Le haut d'un élément flottant ne peut pas être plus haut que le haut intérieur de son élément parent

• Le haut d'un élément flottant ne peut pas être plus haut que tous les flotteurs précédents. Le haut d'un élément ou d'un élément de niveau bloc est plus haut.

• Si un élément flottant précède un autre élément dans le document source, le haut de l'élément flottant ne peut pas être plus haut que le haut de toute zone de ligne contenant la zone générée par l'élément

• Il y a un autre élément flottant à gauche (droite) de l'élément flottant gauche (ou droit), et la limite extérieure droite du premier ne peut pas être à droite (gauche) de la droite ( gauche) limite de son bloc contenant

• Les éléments flottants doivent être placés le plus haut possible

• Les éléments flottants à gauche doivent être placés aussi loin que vers la gauche autant que possible, et les éléments flottants vers la droite doivent être placés le plus à droite.

3. Comportement pratique

Tout d'abord, regardons ce qui se passe lorsqu'un élément flottant est plus haut que son élément parent.
CSS2.1 a clarifié un aspect du comportement des éléments flottants : les éléments flottants s'étendent pour inclure tous leurs éléments flottants descendants. Ainsi, en définissant l'élément parent comme élément float, vous pouvez inclure l'élément float dans son élément parent.

4. Marges négatives

Les marges négatives peuvent entraîner le déplacement des éléments flottants en dehors de leurs éléments parents. En définissant des marges négatives, un élément peut apparaître plus large que son parent, de la même manière qu'un élément flottant peut apparaître plus large que son parent.
Il semble que cette règle semble contredire la précédente (l'élément flottant est placé à l'extérieur de son élément parent
Mais si vous étudiez attentivement les règles de la section précédente, vous constaterez que cela est en fait techniquement autorisé) ; , les limites extérieures d'un élément flottant doivent être à l'intérieur de l'élément parent, mais comme les marges sont négatives, le contenu de l'élément flottant est placé comme s'il couvrait ses propres limites extérieures.

5. Éléments flottants, contenu et chevauchement

Il y a aussi une question intéressante, que se passe-t-il si un élément flottant chevauche le contenu dans le flux normal ?
css2.1 spécifie les règles suivantes :

• Lorsqu'une boîte en ligne chevauche un élément flottant, sa bordure, son arrière-plan et son contenu sont tous affichés "au-dessus" de l'élément flottant .

• Lorsqu'une boîte de bloc chevauche un élément flottant, sa bordure et son arrière-plan sont affichés "en dessous" de l'élément flottant, tandis que le contenu est affiché "au-dessus" de l'élément flottant.

6. Effacer

Parfois, nous ne souhaitons pas toujours que le contenu circule à travers l'élément flottant. Dans certains cas, nous pouvons délibérément éviter ce comportement. Par exemple :
Pour vous assurer que tous les éléments h3 ne sont pas placés à droite de l'élément flottant gauche, vous pouvez définir h3{clear:left;}. Cela peut être compris comme "assurez-vous qu'il n'y a pas d'image flottante sur le côté gauche d'un h3" ;

2. Positionnement

1. Concepts de base

Utilisation du positionnement, vous pouvez définir avec précision les éléments relatifs du cadre où il doit apparaître par rapport à sa position normale, ou définir la position de la fenêtre du navigateur elle-même par rapport à un élément parent ou un autre élément.

2. Type de positionnement

• statique (valeur initiale) :
  La boîte d'élément est générée normalement et l'élément de niveau bloc génère une boîte rectangulaire dans le cadre du flux de documents, un élément en ligne créera une ou plusieurs zones de ligne et les placera dans son élément parent.

• relatif :
  La boîte à éléments est décalée d'une certaine distance. L'élément conserve sa forme non positionnée et l'espace qu'il occupait initialement.

• absolu : La zone d'élément
  est complètement supprimée du flux de documents et positionnée par rapport à son bloc conteneur, qui peut être un autre élément du document ou le bloc conteneur initial. L'espace précédemment occupé par l'élément dans le flux de documents normal est fermé, comme si l'élément n'existait pas. Une boîte au niveau du bloc est générée une fois l'élément positionné, quel que soit le type de boîte initialement généré dans le flux normal.

• corrigé :
  La boîte d'éléments se comporte comme si la position était définie sur absolue, mais son bloc conteneur est la fenêtre elle-même.

3. Bloc contenant

Pour les éléments flottants, le bloc contenant est défini comme l'élément ancêtre au niveau du bloc le plus proche.
Pour le positionnement, la situation est plus compliquée :
- Le bloc conteneur (également appelé bloc conteneur initial) de « l'élément racine » est établi par l'agent utilisateur. En HTML, l'élément racine est l'élément html, mais certains navigateurs utilisent body comme élément racine.
- Pour un élément non racine dont la valeur de position est relative ou statique, le bloc conteneur est délimité par le contenu de la boîte de niveau bloc, de la cellule de tableau ou de la boîte ancêtre du bloc en ligne la plus proche.
- Pour un élément non racine, si sa valeur de position est absolue, le bloc conteneur est défini sur l'élément ancêtre le plus proche dont la valeur de position n'est pas statique.

4. Attributs de décalage

Ci-dessus, nous avons introduit trois mécanismes de positionnement qui utilisent quatre attributs pour décrire le décalage de chaque côté de l'élément positionné par rapport à son bloc conteneur. Nous appelons ces quatre propriétés des propriétés de compensation, qui constituent un élément important de la réalisation du positionnement.
- Pour le haut et le bas, par rapport à la hauteur du bloc contenant
- Pour la droite et la gauche, par rapport à la largeur du bloc conteneur
Ces propriétés décrivent le décalage par rapport au bord le plus proche du bloc conteneur, il est donc également nommé offset.

5. Largeur et hauteur

Définir la largeur et la hauteur

Si vous souhaitez spécifier une largeur spécifique pour l'élément positionné, vous devez évidemment utiliser l'attribut width de la même manière. , utilisez la hauteur, Il est également possible de déclarer une hauteur spécifique pour les éléments positionnés.

Limiter la largeur et la hauteur

Vous pouvez utiliser min-width et min-height pour définir une taille minimale pour la zone de contenu de l'élément.
De même, vous pouvez également utiliser les attributs max-width et max-height pour limiter la taille des éléments.

6. Débordement et découpage du contenu

Débordement

Supposons que, pour une raison quelconque, un élément soit fixé à une taille spécifique, mais que le contenu ne puisse pas tenir dans l'élément. cette fois, vous pouvez utiliser l'attribut overflow pour contrôler cette situation
- visible :
Valeur par défaut, indiquant que le contenu de l'élément est également visible en dehors de la boîte de l'élément. En règle générale, cela entraîne l'extension du contenu au-delà de sa propre boîte d'éléments, mais ne modifie pas la forme de la boîte.
- masqué : le contenu de l'élément
sera recadré à la limite de la zone de l'élément, et aucune interface de défilement ne sera fournie pour permettre aux utilisateurs d'accéder au contenu au-delà de la zone de découpage
 ; - faire défiler :
Le contenu de l'élément est coupé aux limites de la boîte de l'élément, mais un mécanisme de défilement est fourni à l'utilisateur.

7. Découpage du contenu

Si le contenu d'un élément positionné de manière absolue déborde de sa zone de contenu et que le débordement est configuré pour nécessiter un découpage du contenu, la forme de la zone de découpage peut être modifiée en en utilisant l'attribut clip.
clip:rect(top,right,bottom,left);

8. Visibilité de l'élément

En plus du découpage et du débordement, vous pouvez également contrôler la visibilité de l'élément entier.
visibilité :
-visible
- Invisible caché.
- s'effondrer
-herit
visibility:collapse Lorsqu'elle est utilisée dans un élément de tableau, cette valeur supprime une ligne ou une colonne, mais elle n'affecte pas la disposition du tableau. L'espace occupé par les lignes ou les colonnes est mis à disposition pour d'autres contenus. Si cette valeur est utilisée sur un autre élément, elle sera rendue "cachée".
visibility:hidden Lorsqu'un élément est dans l'état "invisible" en définissant la visibilité, l'élément affectera toujours la mise en page du document comme s'il était toujours visible. En d’autres termes, l’élément est toujours là, mais vous ne pouvez pas le voir. Ceci est différent de display:none, qui n'est pas seulement invisible. Il sera également supprimé du document, il n'aura donc aucun impact sur la mise en page du document.

9. Positionnement absolu

Contenant des blocs et des éléments positionnés de manière absolue

Lorsqu'un élément est positionné de manière absolue, il sera complètement supprimé du flux de documents. Il est ensuite positionné par rapport à son bloc contenant. Cela signifie que des éléments positionnés de manière absolue peuvent recouvrir d'autres éléments ou être recouverts par d'autres éléments.
Le bloc conteneur d'un élément en position absolue est l'élément ancêtre le plus proche dont la valeur de position n'est pas statique. Les créateurs sélectionnent généralement un élément comme bloc conteneur d'un élément en position absolue, spécifient sa position comme relative et n'ont pas de décalage.

Décalage automatique des bords

La signification générale du terme position statique d'un élément est : la position d'origine de l'élément dans le flux normal. Plus précisément, la position statique « supérieure » est la distance entre le bord supérieur du bloc conteneur et le bord supérieur de la marge de la boîte imaginaire.

10. Placement et taille des éléments non remplacés

Généralement, la taille et la position d'un élément dépendent de son bloc contenant. La valeur de chaque attribut aura également une certaine influence, mais la plus importante est son bloc conteneur.

11. Placement et taille des éléments remplacés

Les règles de positionnement des éléments non remplacés et des éléments remplacés sont bien différentes. En effet, l'élément remplacé a une hauteur et une largeur inhérentes, sa taille ne changera donc pas.
Lors de la détermination de la position et de la taille d'un élément remplacé, le comportement impliqué est plus facilement décrit par les règles suivantes :
- Si width est défini sur auto, la largeur réelle utilisée est déterminée par la largeur inhérente du contenu de l'élément.
- Dans les langues qui se lisent de gauche à droite, si la valeur de left est auto, remplacez auto par une position statique. La même chose s'applique de droite à gauche
- Si left ou right est toujours auto, remplacez la valeur auto de margin-left ou margin-right par 0 ; - Si margin-left et margin-right sont tous deux définis comme auto à ce moment, définissez-les sur des valeurs égales, centrant ainsi l'élément dans son bloc conteneur
 ; - Après cela, s'il ne reste qu'une seule valeur automatique, modifiez-la pour qu'elle soit égale au reste de l'équation.

12. Le placement sur l'axe Z

est contrôlé par l'attribut z-index

13. Positionnement fixe

Le positionnement fixe est très similaire à. positionnement absolu. C'est juste que le bloc contenant l'élément fixe est la fenêtre. Avec un positionnement fixe, l'élément est complètement supprimé du flux de documents et n'a aucune position par rapport à aucune partie du document.

14. Positionnement relatif

Le mécanisme de positionnement le plus simple à comprendre est le positionnement relatif. Lorsque ce mécanisme est adopté, l'élément positionné est déplacé en utilisant l'attribut offset.