Mise en page CSS - flot et clarification

Mise en page CSS - flot et clarification

CSS float Cette propriété détermine comment un élément flotte.

CSS clear Cette propriété détermine quels éléments peuvent flottent à côté de l'élément de nettoyage et de quel côté.

Propriété float

float Cette propriété est utilisée pour positionner et formater le contenu, par exemple pour faire flotter une image à gauche vers le texte dans le conteneur.

float Cette propriété peut être configurée avec l'une des valeurs suivantes :

  • left - L'élément flotte à gauche de son conteneur
  • right - L'élément flotte à droite de son conteneur
  • none - L'élément ne flotte pas (il est affiché à l'emplacement où il apparaît dans le texte). Valeur par défaut.
  • inherit - L'élément hérite de la valeur float de son parent

La manière la plus simple d'utiliser est :float Cette propriété permet d'obtenir l'effet de texte entourant l'image (comme dans les journaux).

Exemple - float: right;

Dans l'exemple suivant, l'image doit flotter à droite dans le texte :

Ananas

Tutoriels de technologies Web leaders - tout à fait gratuits. Sur CodeW3C.com, vous pouvez trouver tous les tutoriels de construction de site web dont vous avez besoin. De HTML de base à CSS, en passant par des XML, SQL, JS, PHP avancés.

Notre manuel de référence couvre tous les aspects des technologies de site web. Cela inclut les technologies standards W3C : HTML, CSS, XML. Et d'autres technologies telles que JavaScript, PHP, SQL.

Sur CodeW3C.com, nous proposons des milliers d'exemples. En utilisant notre éditeur en ligne, vous pouvez modifier ces exemples et expérimenter avec le code.

Exemple

img {
  float: right;
}

Essayer vous-même

Exemple - float: left;

Dans l'exemple suivant, l'image doit être placée dans le texte :Vers la gaucheFlottaison :

Ananas

Tutoriels de technologies Web leaders - tout à fait gratuits. Sur CodeW3C.com, vous pouvez trouver tous les tutoriels de construction de site web dont vous avez besoin. De HTML de base à CSS, en passant par des XML, SQL, JS, PHP avancés.

Notre manuel de référence couvre tous les aspects des technologies de site web. Cela inclut les technologies standards W3C : HTML, CSS, XML. Et d'autres technologies telles que JavaScript, PHP, SQL.

Sur CodeW3C.com, nous proposons des milliers d'exemples. En utilisant notre éditeur en ligne, vous pouvez modifier ces exemples et expérimenter avec le code.

Exemple

img {
  float: left;
}

Essayer vous-même

Exemple - Pas de float

Dans l'exemple suivant, l'image sera affichée à l'emplacement où elle apparaît dans le texte (float: none;):

Ananas Tutoriels de technologies Web leaders - tout à fait gratuits. Sur CodeW3C.com, vous pouvez trouver tous les tutoriels de construction de site web dont vous avez besoin. De HTML de base à CSS, en passant par des XML, SQL, JS, PHP avancés. Notre manuel de référence couvre tous les aspects des technologies de site web. Cela inclut les technologies standards W3C : HTML, CSS, XML. Et d'autres technologies telles que JavaScript, PHP, SQL. Sur CodeW3C.com, nous proposons des milliers d'exemples. En utilisant notre éditeur en ligne, vous pouvez modifier ces exemples et expérimenter avec le code.

Exemple

img {
  float: none;
}

Essayer vous-même

Lecture complémentaire

Livres de complément :Flottaison CSS