Quels attributs sont utilisés pour faire flotter les éléments en CSS ?-tutoriel CSS-php.cn

Quels attributs sont utilisés pour faire flotter les éléments en CSS ?

青灯夜游

Libérer： 2023-01-03 09:30:56

original

4151 Les gens l'ont consulté

Pour faire flotter des éléments en CSS, utilisez l'attribut float. L'attribut float est utilisé pour définir dans quelle direction un élément flotte ; après qu'un élément utilise l'attribut float, l'élément peut être séparé du flux standard lui-même et flotter au-dessus des autres éléments, de sorte qu'il n'occupe plus l'espace qui lui appartenait à l'origine. à l'élément, mais cela entraînera également le déplacement des éléments suivants vers le haut et occupera l'espace qui appartenait à l'origine à cet élément.

Quels attributs sont utilisés pour faire flotter les éléments en CSS ?

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

Pour faire flotter des éléments en CSS, utilisez l'attribut float.

attribut CSS float

float, comme son nom l'indique, flotte Les éléments avec l'attribut float défini flotteront vers la gauche ou la droite selon l'attribut. valeur. Nous l'appelons paramètre. Les éléments avec l'attribut float sont des éléments flottants. Une fois que l'élément

utilise l'attribut float, l'élément peut être séparé du flux standard lui-même et flotter au-dessus des autres éléments, de sorte qu'il n'occupe plus l'espace appartenant à l'origine à l'élément. les éléments suivants remontent et fusionnent. Occupe l'espace qui appartenait à l'origine à l'élément.

Valeur de l'attribut

gauche L'élément flotte vers la gauche.
l'élément droit flotte vers la droite.
aucun Valeur par défaut. L'élément n'est pas flottant et apparaît là où il apparaît dans le texte.

Compréhension de l'attribut float

1. L'attribut float n'affecte que l'élément lui-même et les éléments suivants utilisant cet attribut (les éléments suivants se déplaceront vers le haut--> pied de page bloc déplacé vers le haut).

2. Une fois que l'élément en ligne utilise l'attribut float, il deviendra un élément de niveau bloc, et la hauteur et la largeur de l'élément pourront être définies (voir la balise A).

3. L'attribut float est généralement utilisé avec l'attribut clear des balises suivantes pour effacer l'impact de l'attribut float sur les éléments suivants.

4. Pour les éléments utilisant l'attribut float, si la largeur de l'élément n'est pas définie, la largeur de l'élément est automatiquement ajustée pour s'adapter à la largeur du contenu (reportez-vous au contenu DIV - la taille du bloc de contenu est non défini, il est donc automatiquement ajusté).

[Tutoriel recommandé : Tutoriel vidéo CSS]

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML中文网</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="Quels attributs sont utilisés pour faire flotter les éléments en CSS ?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

Copier après la connexion

Rendu :

Quels attributs sont utilisés pour faire flotter les éléments en CSS ?