Petites choses que vous ne savez pas sur le flottant CSS

Les mots précédents

FloatLa première utilisation vient de à droite ">, utilisé pour la composition du texte entourant les images. De nos jours, le flottant est une méthode de mise en page couramment utilisée en CSS. Cet article présentera et triera le contenu flottant en détail

Définition

flottant Flottant

L'élément flottant est séparé. du flux ordinaire, puis comme spécifié Direction, déplacez-vous vers la gauche ou la droite, arrêtez-vous lorsque vous rencontrez la limite parent ou un autre élément flottant

Valeur : gauche droite hériter

Valeur initiale : none

S'applique à : Tous les éléments

Héritage : Aucun

[Note] Si vous faites flotter un élément non-remplacement, vous devez déclarer une largeur pour l'élément, sinon, selon la spécification CSS, la largeur des éléments tend vers 0

Caractéristiques

[1] Flux flottant

Dans un flux normal, les éléments sont disposés un les uns après les autres ; les éléments flottants constituent également un flux flottant

【2】Boîte au niveau du bloc

L'élément flottant lui-même générera une boîte au niveau du bloc, quel que soit l'élément lui-même, donc que les marges autour de l'élément flottant ne seront pas fusionnées

【3】Wrapping

Le bloc conteneur d'un élément flottant fait référence à son élément ancêtre au niveau bloc le plus proche, et les éléments flottants descendants ne doivent pas dépasser les limites supérieure, gauche et droite du bloc conteneur. Si la hauteur du bloc conteneur n'est pas définie et que le bloc conteneur flotte, le bloc conteneur s'étendra pour inclure tous ses éléments flottants descendants. Si la largeur du bloc conteneur n'est pas définie et que le bloc conteneur flotte, la largeur de ; le bloc contenant sera étiré par les éléments flottants descendants.

【4】Destructif

L'élément flottant se détache du flux normal et détruit son propre attribut de boîte de ligne . , provoquant l'effondrement de la hauteur de son élément de bloc conteneur, provoquant l'effondrement de la boîte flottante. La boîte de ligne à côté est raccourcie pour faire de la place à la boîte flottante, et la boîte de ligne est réorganisée autour de la boîte flottante

Performance

[1] La limite extérieure gauche (ou droite) de l'élément flottant doit être la limite extérieure droite (gauche) de l'élément flottant à gauche (ou flottant à droite) précédent dans le document source. À moins que le haut de l'élément flottant qui apparaît plus tard soit en dessous du bas de l'élément flottant qui apparaît en premier

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

[3] Il y a un autre élément flottant à gauche (à droite) de l'élément flottant gauche (ou droit), la première La limite extérieure droite ne peut pas être à droite (gauche) de la limite droite (gauche) de son bloc contenant

[4] La gauche (ou droite) la limite extérieure d'un élément flottant ne peut pas dépasser la limite intérieure gauche (ou droite) de son bloc contenant

[5]Le sommet d'un élément flottant ne peut pas être plus haut que le sommet intérieur de son élément parent. Si un élément flottant se trouve entre deux marges fusionnées, placez l'élément flottant comme s'il y avait un élément parent au niveau du bloc entre les deux éléments

[6] Le haut de l'élément flottant ne peut pas être plus haut que tous les flottants précédents Le haut d'un élément ou d'un élément de niveau bloc est plus haut

[7] 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 case générée par l'élément. High

[8] Les éléments flottants doivent être placés le plus haut possible

[9] Les éléments flottants à gauche doivent être placés le plus à gauche possible, et les éléments flottants à droite doivent être placés le plus à droite. Plus la position est haute, plus il flottera vers la droite ou la gauche

Chevauchement

Il existe deux manières pour un élément flottant de dépasser la limite de l'élément parent : l'une est la largeur de l'élément flottant est supérieur à l'élément parent. L'autre méthode consiste à définir des marges négatives. Si un élément flottant a des marges négatives et que l'élément flottant chevauche un élément de flux normal

[1] 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

【2】Lorsque la boîte de bloc chevauche un élément flottant, sa bordure et son arrière-plan sont affichés sous l'élément flottant, et le contenu est affiché au-dessus de l'élément flottant

[Recommandations associées]

1.

Tutoriel vidéo CSS en ligne gratuit

2

Manuel CSS en ligne

3. 2)-tutoriel vidéo 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!