Le flottement UTILITAIRES:Flottement des éléments

La technique des boîtes flottantes a longtemps été utilisée pour créer des mises en page, mais cette technique est obsolète avec l’avènement du module CSS 3 Flexbox. Actuellement le flottement est utilisé ce pour quoi il est fait, à savoir habiller une image par du texte, en faisant flotter l’image à gauche ou à droite, dans son élément parent.

L’exemple de ce titre est à télécharger dans le dossier nommé 12-Utilitaires-02.

1. Appliquer un flottement FLOTTEMENT:Appliquer

Bootstrap vous propose deux classes pour appliquer un flottement. La classe .float-left applique un flottement à gauche et .float-right, à droite.

Voici le code de cet exemple simple :

<div class="border" style="width: 400px;"> 
        <img src="terre.png"  class="float-left" alt="Terre" /> 
        Integer posuere erat... 
</div> 

Le conteneur est une boîte <div> ayant une bordure et une largeur fixée. Dans cette dernière, nous avons l’insertion de l’image, <img> avec la classe .float-left pour l’image à habiller. Toujours dans ce conteneur nous avons ensuite le texte qui est habillé.

Voici l’affichage obtenu :

images/C12-005.png

Voici la propriété CSS de cette classe :

.float-left { 
     ...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les bordures
Suivant
Les jeux de couleurs