Comment utiliser le flotteur ? css : résumé de l'utilisation flottante de float

Pour les développeurs, float doit être utilisé fréquemment. Vous ne pouvez pas vivre sans, mais vous endurez souvent toute la douleur qu'il vous apporte. Peut-être pensez-vous qu'il n'a que peu de connaissances, mais vous pouvez vraiment le contrôler. ? CSS float est ce que nous appelons les objets d'étiquette flottant vers la gauche (float:left) et flottant vers la droite (float:right). Le flottement peut être compris comme le fait qu'un élément DIV se détache du flux standard et flotte sur le flux standard. Il n'est pas au même niveau que le flux standard. Ce chapitre expliquera comment utiliser float.

Vous pouvez d'abord apprendre des cours gratuits liés au site Web chinois php

1 Apprendre "Manuel CSS en ligne" <.>CSS Float(Float)Cours

2. Regardez

"Tutoriel vidéo CSS du programmeur Dark Horse" flotter dans le chapitre

flotter le contenu associé flottant

1.

Explication détaillée de l'utilisation de float que vous ne connaissez pas

L'intention originale de la conception de float est d'obtenir l'effet de graphiques et de texte mélangés, afin que le texte puisse entoure l'image. L'utilisation actuelle consiste essentiellement à obtenir une disposition horizontale. Bien qu'il s'agisse d'une « utilisation abusive », elle peut souvent obtenir l'effet souhaité. La plupart des gens savent comment utiliser le flotteur, mais tout le monde ne connaît pas le principe et l'intention originale de la conception du flotteur.

2.

Explication graphique et textuelle détaillée de css float-float/clear

Si un élément p A est flottant, et si l'élément précédent de l'élément A est également flottant , Ensuite, l'élément A suivra l'élément précédent (si ces deux éléments ne peuvent pas être placés sur une seule ligne, alors l'élément A sera compressé sur la ligne suivante si l'élément précédent de l'élément A est un élément du flux standard) ; , alors la verticalité relative de A La position ne changera pas, ce qui signifie que le haut de A est toujours aligné avec le bas de l'élément précédent.

3.

L'utilisation correcte du float, 90% des gens l'utilisent à tort

float a également une fonctionnalité très utile, qui consiste à libérer des espaces. Je ne posterai pas de photo de cela, juste une description. Par exemple, si je mets une image dans un p, il y aura par défaut quelques pixels d'espace entre les images, ce que l'on peut aussi appeler un espace. Mais souvent, cet écart ou cet espace n'est pas ce dont nous avons besoin. À ce stade, il suffit de donner un flotteur à l'image pour la séparer du flux de documents, et les images s'emboîtent parfaitement.

4.

Deux méthodes pour ajuster la hauteur flottante de plusieurs divs en CSS

Lors de l'utilisation de Div + CSS pour une mise en page à trois ou deux colonnes, deux colonnes doivent être utilisé (ou trois colonnes) ont la même hauteur, ce qui est facile à réaliser avec Table, mais il est plus gênant d'utiliser Div + CSS. Selon la pratique générale, la plupart d'entre eux utilisent le remplissage d'une image d'arrière-plan ou un script JS pour uniformiser la hauteur.

5.

Explication détaillée de float en CSS

L'origine de a.float

La conception originale de float est de créer un effet d'emballage pour le texte, qui c'est aussi la conception Ce que l'auteur veut que nous fassions.

Paramètres b.float

Il existe trois valeurs de paramètre pour l'attribut float :

Left : Indique que l'élément flotte à gauche.

Droite : Indique que l'élément flotte vers la droite.

Aucun : L'objet ne flotte pas et suit le flux documentaire standard.

c.Affichage des effets (prenons float: left comme exemple, le cas de float: right n'est qu'une différence de position)

6.

Introduction détaillée aux bases CSS de float.

Floating a 4 attributs : left (flottant à gauche), right (flottant à droite), aucun (non flottant), hériter (hériter).

Le bloc conteneur d'un élément flottant est son ancêtre au niveau du bloc le plus proche.

L'élément flottant sera décalé vers la gauche (ou la droite) jusqu'à ce que son bord extérieur touche le bord intérieur du bloc contenant ou le bord extérieur d'un autre élément flottant.

Questions et réponses connexes

1.

Comment résoudre le problème de la chute des éléments flottants

2.

Lors de l'utilisation de l'attribut float en HTML, la hauteur de l'élément parent deviendra 0. Comment le résoudre ?

3. Dans quelles circonstances le flotteur échouera-t-il ?

[Recommandations associées]

1. Tutoriels gratuits sur le site Web chinois php : "Tutoriel d'introduction de base CSS 0"

2. php Tutoriel vidéo en ligne gratuit en chinois : "php.cn Dugu Jiujian (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!