Utilisation du flotteur CSS pour faire fonctionner DIV

L'attribut float de style CSS est utilisé pour définir la disposition flottante des objets d'étiquette (tels que :

boîte d'étiquette, étiquette, étiquette, étiquette et autres étiquettes HTML. ), Flottant est ce que nous appelons les objets d'étiquette flottant vers la gauche (float:left) et flottant vers la droite (float:right).

Que signifie flotter ?

float signifie flotter, et cela signifie également flotter lorsqu'il est traduit en chinois. Accédez au manuel float dans le manuel CSS correspondant pour en savoir plus sur les informations de base sur float.

Le rôle de float

Définissez float (float) via CSS pour laisser le bloc de calque de style div flotter vers la gauche ou la droite (penché).

répertoire du didacticiel flottant flottant

syntaxe flottante

application et utilisation flottantes

cas flottant flottant

css flottant autres applications

résumé CSS float

syntaxe float

Float est souvent suivi de valeurs d'attribut left, right, none

Float:none Ne pas utiliser float

Float : gauche Flotteur vers la gauche

Float :droite Flotteur vers la droite

syntaxe float :

float : aucun gauche |droite

Valeur du paramètre :

aucun : L'objet ne flotte pas

gauche : L'objet flotte à gauche

droite : L'objet flotte à droite

Ensuite, nous expliquerons float à travers un exemple div+css Conseils d'utilisation.

Application et utilisation du flotteur

Float est utilisé pour définir les styles flottants des objets à gauche et à droite. Il peut réaliser ce dont nous avons besoin pour faire flotter les étiquettes DIV, SPAN et autres à gauche et à droite.

Syntaxe simple à utiliser

div{float:left} /* commentaire css : Définit l'objet div pour qu'il flotte vers la gauche (gauche) */

div{float :right} / * commentaire css : Définissez l'objet div pour qu'il flotte vers la droite (à droite) */

cas flottant css float

Nous mettons en place deux boîtes dans une boîte, une vers la à droite et un à gauche afin de voir intuitivement l'effet de mise en page flottante CSS, nous définissons une certaine largeur, hauteur et bordure pour les deux cases.

1. Extrait de code HTML principal :

Mise en page à gauche Flottant

Mise en page flottante vers la droite

< div>

2. { width:400px;padding:10px;border:1px solid #F00}

.div _left{ float:left;width:150px;border:1px solid #00F;height:50px}

.div _right{ float:right;width:150px;border:1px solid #00F;height:50px}

.clear{ clear:both}

L'utilisation float de l'opération CSS DIV est le suivant Il y en a tellement, les amis qui en ont besoin peuvent les sauvegarder, et continuez à prêter attention aux autres mises à jour sur ce site.

Lecture connexe :

Comment définir la largeur minimale et la largeur maximale du CSS

Quelle est la fonction de la marge CSS

Comment faire des coins arrondis en CSS3

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!

Étiquettes associées：

css float

source：php.cn

Article précédent：Comment écrire un texte d'ancrage en HTML Article suivant：Comment utiliser CSS pour manipuler le z-index d'un div

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Introduction à la dernière version de PHP Programmer Toolbox v1.0
  2018-06-11 11:57:34
• Comment gérer l'échec du routage vue.js
  2018-06-15 15:55:18
• Comment utiliser js pour analyser la base de données (avec code)
  2018-06-15 15:49:00
• Comment utiliser js pour lier les événements DOM dans le projet
  2018-06-15 15:46:15
• Comment utiliser les chaînes JS et les caractères spéciaux
  2018-06-15 15:42:38
• Comment utiliser chaque méthode dans jQuery dans un projet
  2018-06-15 15:40:34
• Comment utiliser jquery pour télécharger des fichiers
  2018-06-15 15:39:32
• Comment utiliser le prototype JS et la chaîne de prototypes
  2018-06-15 15:37:14
• Démonstration pratique du projet Angular CLI+Angular 5
  2018-06-15 15:34:21
• Remplacer les éléments de nœud à l'aide de jQuery (code ci-joint)
  2018-06-15 15:22:51

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

3

2347

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

11

2476

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

2099

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1978

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

2049

Rubriques connexes

Plus>

• css
• centré sur CSS
• Comment insérer des images en CSS
• CSS au-delà de l'affichage...
• couleur de la police CSS
• qu'est-ce que le CSS
• Comment écrire un triangle en CSS
• CSS définir la couleur du texte