Utilisation de float en CSS

L'attribut

float fait flotter les éléments sur la page et les affiche côte à côte avec les éléments adjacents sans affecter la disposition fluide habituelle. Les valeurs float sont : left (left float), right (right float), none (clear float). Les éléments flottants affectent le débordement de contenu, l'espacement et la hauteur du conteneur parent. Les méthodes de suppression des flottants incluent : la suppression des attributs, des éléments flottants et du débordement : caché.

Utilisation de float en CSS

float définition

La propriété float en CSS positionne un élément en dehors de sa zone de contenu, le faisant flotter sur la page. Les éléments flottants n'affectent pas la disposition régulière du flux des autres éléments, mais apparaissent côte à côte avec leurs éléments adjacents.

valeurs float L'attribut

float peut accepter les valeurs suivantes :

• left : Faites flotter l'élément sur le côté gauche du conteneur.
• à droite : Faites flotter l'élément sur le côté droit du conteneur.
• aucun : Effacez le flotteur, ramenant l'élément à sa disposition fluide normale.

Usage

Pour faire flotter un élément, ajoutez l'attribut float à son style :

<code class="css">element {
  float: left;
}</code>

Affects

Un élément flottant affecte ses éléments proches :

• Débordement de contenu : d'un élément flottant Contenu peut déborder des éléments adjacents.
• Espacement : Il peut y avoir un espacement entre les éléments flottants et les éléments adjacents.
• Hauteur du conteneur parent : Si la hauteur de l'élément flottant est supérieure à celle du conteneur parent, la hauteur du conteneur parent s'ajustera automatiquement pour s'adapter à l'élément flottant.

Effacer les flotteurs

Pour effacer les flotteurs, vous pouvez utiliser l'une des méthodes suivantes :

• Effacer l'attribut : Appliquez l'attribut clear à un élément, en effaçant tous ses éléments flottants.
• Éléments flottants : Ajoutez un élément flottant après l'élément flottant, effacez l'élément flottant dans une nouvelle ligne.
• overflow : caché : Appliquez la propriété overflow au conteneur parent pour masquer les éléments flottants dans le conteneur.

Exemple

Le code suivant crée un conteneur avec deux éléments flottants :

<code class="html"><div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div></code>

<code class="css">.container {
  display: flex;
}

.element1 {
  float: left;
  background: red;
  width: 100px;
}

.element2 {
  float: right;
  background: blue;
  width: 100px;
}</code>

Sortie :

<code>元素 1 | 元素 2</code>

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!