Comment définir float en CSS-tutoriel CSS-php.cn

Comment définir float en CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:17

original

8787 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut float pour définir float. Il vous suffit de définir "float:left|right|none" pour l'élément où left signifie flotter vers la gauche, right signifie flotter vers la gauche ; à droite, et aucun signifie que l'élément ne flotte pas et apparaît là où il apparaît dans le texte.

Comment définir float en CSS

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

Le flottement peut être défini via l'attribut float en CSS. L'attribut float définit dans quelle direction l'élément flotte. Historiquement, cette propriété a toujours été appliquée aux images, provoquant l'enroulement du texte autour de l'image, mais en CSS, n'importe quel élément peut flotter. Un élément flottant crée une boîte au niveau du bloc, quel que soit le type d'élément dont il s'agit.

attribut float :

Si les éléments non remplacés sont flottants, une largeur explicite est spécifiée sinon, ils sont conservés aussi étroits que possible ;

Remarque : s'il y a très peu d'espace pour un élément flottant sur une ligne, l'élément passera à la ligne suivante. Ce processus se poursuivra jusqu'à ce qu'une certaine ligne dispose de suffisamment d'espace.

Valeurs possibles de l'attribut float :

left 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.

Exemple de paramètre flottant CSS :

<html>
<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>
 
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img  src="/static/imghw/default1.png"  data-src="猫/images/1.jpg"  class="lazy"      style="max-width:90%"/ alt="Comment définir float en CSS" >
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
</p>
</body>
</html>

Copier après la connexion

Résultat d'exécution :

Comment définir float en CSS

La boîte flottante peut être laissée ou vers la gauche Déplacez-le vers la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante. Étant donné que la boîte flottante ne se trouve pas dans le flux normal du document, une boîte de bloc dans le flux normal du document se comporte comme si la boîte flottante n'existait pas.

L'avantage du flottant est bien sûr la mise en page, comme le flottement pour former une mise en page à trois colonnes, l'habillage du texte, etc. Mais le flottement a également un problème, c'est-à-dire qu'il entraînera un effondrement de la hauteur. Comme le montre l'image ci-dessus, la hauteur de l'élément parent s'effondrera et les éléments enfants flottants ne seront pas enveloppés, ce qui entraînera des erreurs de mise en page.

Apprentissage recommandé : Tutoriel vidéo CSS

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!