Quel est l'attribut qui efface les flotteurs en HTML5 ?

En HTML5, l'attribut pour effacer les flotteurs est "clear". L'attribut clear spécifie quel côté de l'élément n'autorise pas d'autres éléments flottants. Lorsque le style "clear:both;" est défini sur l'élément flottant, l'élément flottant peut être effacé afin que ni les côtés gauche ni droit de l'élément ne le soient. laissé flotter.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En HTML5, l'attribut pour effacer les flotteurs est "clear".

L'attribut clear spécifie quel côté de l'élément n'autorise pas d'autres éléments flottants

Regardons de plus près l'attribut clear.

Tout d'abord, il faut savoir que div est un élément de niveau bloc. Il occupe une ligne exclusive sur la page et est disposé de haut en bas, ce qui est le flux légendaire. Comme le montre l'image ci-dessous :

On voit que même si la largeur de div1 est très petite, une ligne sur la page peut accueillir div1 et div2, et div2 ne sera pas classé derrière div1 car l'élément div occupe sa propre ligne. ?                                                dehors                             ,                   Dans, IN IN, ON IN, TO IN, PAR ENVIRONNEMENT, IN, TO, PLACE INTO LE DÉBIT STANDARD.

 Xiaocai estime que quelle que soit la complexité de la mise en page, le point de départ de base est : « Comment afficher plusieurs éléments div sur une seule ligne ».

                                                                                                       À DONNER EN COURANT POUR ALLER AU FLUX STANDARD. ​​​​

​​​​ Flotter peut être compris comme le fait qu'un certain élément div se détache du flux standard et flotte sur le flux standard, qui n'est pas au même niveau que le flux standard.

Par exemple, en supposant que div2 dans l'image ci-dessus flotte, il s'éloignera du flux standard, mais div1, div3 et div4 sont toujours dans le flux standard, donc div3 se déplacera automatiquement vers le haut, occupera la position de div2, et réorganiser un flux. Comme le montre l'image :

Comme le montre l'image, puisque div2 est réglé pour flotter, il n'appartient plus au flux standard. div3 monte automatiquement pour remplacer la position de div2, div3,. et div4 sont disposés en séquence pour devenir un nouveau flux. Et comme les flotteurs flottent au-dessus du débit standard, div2 bloque une partie de div3 et div3 semble "court".

Ici, div2 utilise le flottant à gauche (float:left;), qui peut être compris comme flottant et disposé à gauche, et le flottant à droite (float:right;) signifie bien sûr disposé à droite. Les valeurs gauche et droite font ici référence aux bords gauche et droit de la page.

Si nous faisons flotter div2 vers la droite, l'effet sera le suivant :

A ce moment, div2 est disposé contre le bord droit de la page et ne bloque plus div3. Les lecteurs peuvent voir clairement la composition de div1. , div3 et div4 mentionnés ci-dessus du flux.

Jusqu'à présent, nous n'avons fait flotter qu'un seul élément div, que diriez-vous de plus ?

Ensuite, nous ajoutons le flottement gauche à div2 et div3. L'effet est le suivant :

De même, puisque div2 et div3 sont flottants, ils n'appartiennent plus au flux standard, donc div4 montera automatiquement. et formez-en un avec div1 Le "nouveau" flux standard, et le flotteur flotte au-dessus du flux standard, donc div2 bloque à nouveau div4.

Ahem, venons-en au fait. Lorsque div2 et div3 sont configurés pour flotter en même temps, div3 suivra div2. Je ne sais pas si les lecteurs ont remarqué que jusqu'à présent, div2 flotte dans chaque exemple, mais c'est le cas. ne suit pas Il ne suit pas après div1. Par conséquent, nous pouvons tirer une conclusion importante :

Si un certain élément div A est flottant, et si l'élément précédent de l'élément A est également flottant, alors l'élément A suivra l'élément précédent (s'il ne peut pas tenir dans un ligne) deux éléments, alors l'élément A sera pressé vers la ligne suivante); si l'élément précédent de l'élément A est un élément du flux standard, alors la position verticale relative de A ne changera pas, c'est-à-dire le haut de A sera toujours le même que l’élément précédent aligné en bas.

L'ordre des divs est déterminé par l'ordre des divs dans le code HTML.

La fin proche du bord de la page est le recto, et la fin éloignée du bord de la page est le verso.

Pour aider les lecteurs à comprendre, voici quelques exemples supplémentaires.

Si nous définissons div2, div3 et div4 pour qu'ils flottent vers la gauche, l'effet est le suivant :

Selon la conclusion ci-dessus, suivez Xiaocai pour le comprendre : commencez par l'analyse de div4, il constate que l'élément supérieur div3 flotte, donc div4 suivra div3 ; follow After div2; et div2 constate que l'élément supérieur div1 est un élément du flux standard, donc la position verticale relative de div2 reste inchangée et le haut est toujours aligné avec le bas de l'élément div1. Puisqu'il est laissé flottant, le côté gauche est proche du bord de la page, donc le côté gauche est le devant, donc div2 est à l'extrême gauche.

Si vous définissez div2, div3 et div4 pour qu'ils flottent à droite, l'effet est le suivant :

Le principe est fondamentalement le même que pour flotter à gauche, mais vous devez faire attention à la relation correspondante. Puisqu'il flotte à droite, le côté droit est proche du bord de la page, donc le côté droit est le devant, donc div2 est à l'extrême droite.

Si nous faisons flotter div2 et div4 vers la gauche, le diagramme d'effet est le suivant :

Toujours basé sur la conclusion, div2 et div4 flottent et hors du flux standard, donc div3 montera automatiquement et se formera le flux standard avec div1. div2 constate que l'élément précédent div1 est un élément du flux standard, donc la position verticale relative de div2 reste inchangée et est alignée avec le bas de div1. div4 constate que l'élément précédent div3 est un élément du flux standard, donc le haut de div4 est aligné avec le bas de div3, et cela est toujours vrai, car comme le montre l'image, après que div3 monte, div4 également monte, et div4 monte toujours. C'est pour s'assurer que le haut de lui-même est aligné avec le bas de l'élément précédent div3 (un élément dans le flux standard).

À ce stade, félicitations aux lecteurs qui maîtrisent l'ajout de flotteurs, mais il existe également la suppression des flotteurs. La suppression des flotteurs est très facile à comprendre sur la base des bases ci-dessus. ， Après avoir appris ci-dessus, on peut voir qu'avant que l'élément ne flotte, il se trouve dans le flux standard, qui est disposé verticalement, et il peut être compris comme une disposition horizontale après flottement.

Le dégagement des flotteurs peut être compris comme une rupture de la disposition horizontale. ?                     . Les objets flottants sont autorisés des deux côtés

gauche : Les objets flottants ne sont pas autorisés du côté gauche

droite : Les objets flottants ne sont pas autorisés du côté droit

les deux : Les objets flottants ne sont pas autorisés

La définition est très simple à comprendre, mais les lecteurs peuvent être confus lorsqu'ils l'utilisent réellement. Vous constaterez que ce n'est pas le cas.

Il n'y a rien à redire sur la définition, mais elle est trop vague et nous laisse perplexe.

Sur la base de la base ci-dessus, s'il n'y a que deux éléments div1 et div2 sur la page, ils flottent tous les deux à gauche. Le scénario est le suivant :

À ce moment, div1 et div2 flottent selon. selon les règles, div2 suivra div1. Mais nous voulons toujours que div2 soit disposé en dessous de div1, tout comme div1 ne flotte pas et div2 reste flottant.

Il est nécessaire d'utiliser clear float pour le moment. Si vous suivez uniquement la définition officielle, les lecteurs peuvent essayer d'écrire comme ceci : ajoutez clear:right au style CSS de div1, ce qui signifie que les éléments flottants ne sont pas autorisés sur le côté droit de div1 Puisque div2 est un élément flottant, il descendra automatiquement d'une ligne pour respecter les règles.

En fait, cette compréhension est incorrecte et elle n'a aucun effet. Jetons un coup d'oeil à la conclusion :

                                                                                                                                                                                                                               pour être clair.

Comment le comprenez-vous ? Prenons l'exemple ci-dessus, nous voulons que div2 se déplace, mais nous utilisons clear float dans le style CSS de l'élément div1, en essayant de forcer div2 à descendre en effaçant l'élément flottant sur le côté droit de div1 (clear:right;) , ceci n'est pas réalisable, car ce float clair est appelé dans div1, il ne peut affecter que div1, pas div2.

 Selon la conclusion de Xiaocai, si vous souhaitez que div2 descende, vous devez utiliser float dans le style CSS de div2. Dans cet exemple, il y a un élément flottant div1 sur le côté gauche de div2, donc tant que vous utilisez clear:left; dans le style CSS de div2 pour spécifier que les éléments flottants ne sont pas autorisés à apparaître sur le côté gauche de div2. élément, div2 sera obligé de descendre d’une ligne.

Et s'il n'y avait que deux éléments div1 et div2 sur la page, et qu'ils flottent tous les deux à droite ? Les lecteurs devraient être capables de deviner la scène par eux-mêmes à ce moment-là, comme suit :

Si vous souhaitez que la division 2 descende à la division 1, que devez-vous faire ?

De même, sur la base de la conclusion de Xiaocai, si nous voulons déplacer div2, nous devons appeler float dans le style CSS de div2, car float ne peut affecter que l'élément qui l'appelle.

On peut voir qu'il y a un élément flottant div1 sur le côté droit de div2, alors nous pouvons utiliser clear:right; dans le style CSS de div2 pour spécifier que les éléments flottants ne sont pas autorisés à apparaître sur le côté droit de div2. , de sorte que div2 soit obligé de descendre d'une ligne et d'être classé en dessous de div1.

Recommandations associées : "Tutoriel vidéo HTML"

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!