Qu'est-ce que le flotteur ? Explication détaillée de l'attribut float

Qu'est-ce que le flotteur ? Pourquoi utiliser float ? Cet article vous présentera ce qu'est float, vous permettra de comprendre le rôle de float sur la mise en page et comment effacer float. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d’abord, comprenons Qu’est-ce que float ?

float est un attribut de positionnement du CSS. Pour comprendre son objectif et son origine, nous pouvons examiner la conception typographique. Dans une mise en page d'impression, vous pouvez définir des images sur la page de manière à ce que le texte les entoure comme vous le souhaitez. Ceci est souvent appelé à juste titre « habillage de texte ». Voici un exemple :

Dans le programme de mise en page, il peut être demandé à la zone contenant le texte de suivre l'habillage du texte ou de l'ignorer. Ignorer l'habillage du texte permettra aux mots de circuler au-dessus de l'image comme s'ils n'étaient même pas là. C'est la différence entre si l'image fait partie du flux de la page (ou non). La conception Web est très similaire.

Dans la conception Web, les éléments de page auxquels la propriété CSS float est appliquée se comportent comme des images entourées de texte dans une mise en page imprimée. Les éléments flottants font toujours partie du flux de la page Web. Ceci est très différent de l’utilisation d’éléments de page positionnés de manière absolue. Les éléments de page positionnés de manière absolue seront supprimés du flux de la page Web, tout comme les zones de texte dans les mises en page imprimées doivent ignorer les retours à la page. Les éléments de page positionnés de manière absolue n'affectent pas la position des autres éléments, et les autres éléments ne les affectent pas non plus, qu'ils se touchent ou non.

La définition de float sur un élément à l'aide de CSS se déroulera comme suit :

.demo {
  float: right;			
}

L'attribut float a quatre valeurs valides, qui sont :

left : paramètre l'élément Float to the left;

right : définissez l'élément pour qu'il flotte vers la droite ;

aucun : valeur par défaut, définissez l'élément pour qu'il ne flotte pas

héritez ; Spécifiez que l'attribut float doit être hérité de la valeur de l'élément parent.

Pourquoi utiliser float ?

Le flottement facilite également l'aménagement dans des zones plus petites. Prenons par exemple cette petite zone d’une page Web. Si nous utilisons float pour notre petite image d'avatar, lorsque cette image change de taille, le texte dans la boîte se redistribuera pour s'adapter :

en utilisant le positionnement relatif sur le conteneur et la même chose la mise en page peut également être réalisée avec un positionnement absolu sur l'avatar. De cette façon, le texte ne sera pas affecté par l'avatar et ne pourra pas être redistribué lorsque la taille change.

Pourquoi devons-nous nettoyer les flotteurs ?

float (float) permet de retirer l'élément du flux normal, et d'autres éléments seront affichés à côté de lui, donc si nous voulons empêcher les éléments suivants de remonter (comme indiqué ci-dessous, empêcher le pied de page de remonter), ce qui nécessite de l'effacer. Nous devons effacer le flotteur du pied de page pour nous assurer qu'il se trouve en dessous des deux colonnes flottantes. Pour résoudre ce problème, vous devez utiliser l'attribut clear.

.footer {
  clear: both;
}

L'attribut clear a cinq valeurs valides, à savoir :

left : Clear à gauche Flottant éléments.

droite : Effacer les éléments flottants à droite.

les deux : effacez les éléments qui flottent sur les côtés gauche et droit.

aucun : Valeur par défaut, permettant aux éléments flottants d'apparaître des deux côtés. Il s'agit généralement d'une valeur inutile, sauf si la valeur claire est supprimée de la cascade.

inherit : Le paramètre spécifie que la valeur de l'attribut clear doit être héritée de l'élément parent.

Résumé : Ce qui précède représente tout le contenu de cet article sur les questions liées aux flotteurs. J'espère qu'il sera utile à l'étude de chacun.

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!