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

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!