Maison > Article > interface Web > 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 :
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 :
Effacer les flotteurs
Pour effacer les flotteurs, vous pouvez utiliser l'une des méthodes suivantes :
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!