Suivant comment il est utilisé, la propriété float peut être un bon ami ou un véritable ami. Mais alors comment bien l’utiliser ?

C’est ce que nous allons voir durant ce tutoriel, en trois parties : la notion de « flux », comprendre l’ordre son fonctionnement, des exemples d’application.

Si vous avez besoin d’aide pour apprendre le CSS, n’hésitez pas à déposer une demande sur Codeur.com afin de trouver un formateur CSS qui pourra vous apprendre toutes les spécificités du langage !

 

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

Comprendre la notion de flux

Admettons le code HTML suivant :

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

Alors oui, ce code est très simpliste, mais ce n’est pas ce qui nous intéresse.

Cet extrait de HTML est constitué d’une div et de trois span. Avec un code aussi simple, et sans CSS qui viennent modifier leur comportement, les span se suivent les unes après les après autres.

Cette linéarité fait partie du « flux » des balises dans la div.

On parle de flux pour désigner la succession des balises qui définissent la page. C’est ce qui va permettre, par défaut, de faire en sort à ce qu’un élément aille à côté ou sous l’élément précédent sans se chevaucher.

 

Fonctionnement du float

Reprenons le code HTML précédent, en appliquant une modification : nous allons tout simplement ajouter une propriété CSS float: right; sur un span. Pour mieux comprendre, nous allons faire ça sur le deuxième.

<div>
  <span>1</span>
  <span style="float:right;">2</span>
  <span>3</span>
</div>

Maintenant, examinons le résultat.

Non, vous ne rêvez pas, le 2 est bien passé à droite.
Et non, ce n’est pas de la magie vaudou, mais une question de flux.

Le fait d’indiquer une propriété CSS float à une balise va tout simplement la faire changer de flux. Dans notre cas, au lieu d’être dans le flux par défaut, le second span se retrouve dans le flux de droite. Les span 1 et 3 font partie du flux par défaut et restant donc côte à côté, en ignorant leur copain span 2 qui a décidé de prendre son propre chemin.

Finalement, la propriété float permet tout simplement de changer le flux de balises.
Il existe trois flux :

  • le flux par défaut, none ;
  • un flux à gauche, left ;
  • un flux à droite, right.

Il n’est pas possible de créer un nouveau flux. Cependant, suivant les cas de figure, il est possible de jouer avec la propriété CSS absolute pour avoir un rendu similaire, même si cela est déconseillé.

Une façon plus imagée de voir les flux : imaginez-vous à La Poste ; vous devez faire la queue pour envoyer votre courrier (les machines automatiques sont en panne) et qu’il y a trois files d’attente : une à gauche, une au milieu et une à droite ; celle du milieu étant la file par défaut.
Peu importe la file d’attente que vous allez choisir, votre avancement dépendra des personnes devant vous et pas des personnes dans les autres files d’attente. Vous faites partie du flux de la file d’attente que vous avez choisie. Le flux des autres files d’attente n’a aucune incidence sur votre vitesse d’avancement.
Et, si vous décidez de changer de queue, vous changez de flux et votre vitesse d’avancement dépendra des personnes devant vous dans votre nouveau flux.
Finalement, quand vous changez de fil d’attente, vous modifiez votre propriété CSS float.

 

Exemple d’application

Dans quel genre de situation peut-on avoir d’utiliser la propriété CSS float ?

Eh bien, par exemple, pour construire un en-tête, où il y a deux méthodes ; le séparer en deux avec un morceau aligné à gauche et l’autre à droite ; ou bien utiliser la propriété CSS float.

Voici un exemple complet.

Ici, nous avons dans le flux normal le logo et le premier logo. Puis, dans le flux right, le menu utilisateur suivi du bouton « Panier ». Ces deux derniers éléments se retrouvent donc placés à droite.

 

Notre astuce pour bien utiliser la propriété CSS float

La propriété CSS float joue sur le flux des éléments CSS. Il existe trois flux, donc trois valeurs pour float : none, left, right.

Vous pouvez retrouver ici les exemples de code qui ont servi à écrire ce tutoriel.

Si par malchance vous rencontrez des problèmes de CSS float qui vous posent un problème, vous pouvez déposer gratuitement une annonce sur Codeur.com afin de trouver un développeur web expert en CSS qui saura résoudre votre problème et embellir votre site internet.