Maison > interface Web > tutoriel CSS > le corps du texte

Une brève introduction aux propriétés flottantes en CSS

黄舟
Libérer: 2017-06-04 11:51:03
original
2185 Les gens l'ont consulté

Pour introduire le floatattribut flottant du CSS, vous devez d'abord comprendre le flux de documents standard

flux de documents standard :

Sans l'intervention de CSS, les éléments au niveau du bloc occupent une ligne. Vous pouvez définir la largeur et la hauteur, et les éléments en ligne sont affichés côte à côte, ainsi que la largeur. et la hauteur sont automatiquement remplies.

Le flux de documents standard (mise en page par défaut) des pages HTML est le suivant : de haut en bas, de gauche à droite, avec des sauts de ligne en cas de rencontre de blocs (éléments au niveau du bloc).

L'utilisation initiale de l'attribut float consistait à envelopper le contenu cible avec du texte, ce qui est souvent vu dans les journaux. Plus tard, il a été principalement utilisé pour réaliser la disposition horizontale du contenu côte à côte. side. ,

Couche flottante : Après avoir attribué une valeur à l'attribut float de l'élément, il est séparé du flux de documents et flotte à gauche et à droite, près des bordures gauche et droite. de l'élément parent (la zone par défaut est la zone de texte du corps).

Introduction de l'attribut float :

left : L'élément flotte vers la gauche.

droite : L'élément flotte vers la droite.

Caractéristiques du flottement :

[1] Le flottement de l'enfant provoque l'effondrement de la hauteur du parent Solution : 1. Ajouter. au parent à nouveau Une hauteur 2. Utiliser débordement : caché

[2] Emballage flottant :

élément de niveau bloc : est enveloppé dans la zone de contenu et n'occupe plus une ligne entière, mais il a toujours la même longueur que le contenu, et le corps est toujours un élément de niveau bloc

Éléments en ligne : après avoir défini float, l'attribut display sera modifié, ce qui en fera un élément de niveau bloc, et la largeur et la hauteur pourront être définies.

【3】Les éléments flottants ne traverseront pas la zone de rembourrage

【4】Les éléments flottants quitteront la Le flux de documents affecte d'autres éléments.

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