Float est-il une nouvelle fonctionnalité de CSS3 ?-Questions et réponses frontales-php.cn

Float est-il une nouvelle fonctionnalité de CSS3 ?

WBOY

Libérer： 2022-06-23 15:37:51

original

1349 Les gens l'ont consulté

Le flottement n'est pas une nouvelle fonctionnalité de CSS3. L'attribut float qui définit la direction dans laquelle un élément flotte peut déjà être utilisé en CSS1. Floating en CSS déplacera l'élément vers la gauche ou la droite, et les éléments environnants seront également réorganisés. Déplacez-vous vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.

Float est-il une nouvelle fonctionnalité de CSS3 ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

css float

Float n'est pas une nouvelle fonctionnalité de css3

CSS Float (float) déplacera l'élément vers la gauche ou la droite, et les éléments autour de lui seront également réorganisés.

Float est souvent utilisé pour les images, mais il est également très utile en mise en page.

Comment les éléments flottent

L'élément flotte horizontalement, ce qui signifie que l'élément ne peut se déplacer que de gauche à droite, mais pas de haut en bas.

Un élément flottant essaiera de se déplacer vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.

Les éléments après l'élément flottant l'entoureront.

Les éléments situés avant l'élément flottant ne seront pas affectés.

Si l'image flotte vers la droite, le flux de texte suivant s'enroulera à gauche :

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style>
img 
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="Float est-il une nouvelle fonctionnalité de CSS3 ?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Float est-il une nouvelle fonctionnalité de CSS3 ?