Maison > interface Web > tutoriel CSS > Comment faire flotter la boîte en CSS

Comment faire flotter la boîte en CSS

王林
Libérer: 2020-11-17 16:30:45
original
6709 Les gens l'ont consulté

Comment faire flotter la boîte en CSS : Vous pouvez utiliser l'attribut float, tel que [float: left;]. L'attribut float permet de disposer plusieurs boîtes horizontalement sur une rangée, à gauche ou à droite. La largeur de la boîte n'est plus étirée, mais est déterminée en fonction de la largeur du contenu à l'intérieur de la boîte.

Comment faire flotter la boîte en CSS

Box float

En flux standard, un élément de niveau bloc s'étirera automatiquement horizontalement, connaissant les côtés de l'élément qui le contient. connectés et disposés en séquence avec des éléments adjacents dans le sens vertical, et non côte à côte.

(Recommandation vidéo d'apprentissage : tutoriel vidéo Java)

L'attribut float dans CSS est par défaut sur none. Définir la valeur de l'attribut float sur gauche ou droite déplacera l'élément vers la gauche ou la droite de son élément parent. Dans le même temps, par défaut, la largeur de la boîte ne s'étire plus, mais est déterminée en fonction de la largeur du contenu à l'intérieur de la boîte.

float: left;
Copier après la connexion

Vous pouvez utiliser clear pour effacer les flotteurs :

clear: left | right | both;
Copier après la connexion

Float (float)

Fonction : Disposer plusieurs cases horizontalement sur une ligne, à gauche et à droite

Syntaxe : selector { float : valeur d'attribut ; >

left:元素向左浮动
right:元素向右浮动
Copier après la connexion

Caractéristiques :

flottera au-dessus du flux standard

L'affichage n'occupera pas la position du standard stream box

sera converti en un élément similaire à un bloc en ligne, mais il n'y aura aucun espace entre les éléments

Recommandations associées : Tutoriel 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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal