Sommaire

Le flottement des Boîte:flottementboîtes

1. Habiller une image

L’objectif initial du flottement des boîtes était l’habillage du texte autour d’une image. Comme souvent, cette fonctionnalité a été utilisée pour autre chose, à savoir pour faire de la mise en page. Cela reste possible, mais avec de nombreuses limites qu’il faut savoir contourner.

C’est la propriété Flottement:floatCSS 2.1 float qu’il faut utiliser. Elle accepte ces valeurs :

  • left : l’élément est placé sur sa gauche dans son élément parent et les éléments suivants le contournent sur sa droite.

  • right : l’élément est placé sur sa droite dans son élément parent et les éléments suivants le contournent sur sa gauche.

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
<head> 
   <meta charset="UTF-8"> 
   <title>Titre de la page</title> 
   <style> 
       #hippopotame img { 
           float: left ; 
           margin-right: 20px ; 
       } 
       #tigre img { 
           float: right; 
           margin-left: 20px ; 
       }  ...