La propriété float spécifie si un élément doit "flotter". On parle aussi d'adjacences des éléments les uns par rapport aux autres.
C'est à dire qu'avec la propriété float, il est possible de changer le comportement des zones d'affichages, les unes par rapport aux autres dans un conteneur.
La propriété float prend les valeurs suivantes...
<!DOCTYPE html>
<html>
<head>
<style>
img {
float : right;
margin 0 0 10px 10px;
}
</style>
</head>
<body>
<h1>Crème pâtissière</h1>
<p>Fendre la gousse de vanille en deux avec la pointe...</p>
<p><img src="eclair.JPG" width="250" height="197">Faire bouillir...</p>
<p>Clarifier les œufs et réserver les blancs au frais...</p>
<p>Avec le fouet, blanchir énergiquement les jaunes d’oeufs avec...</p>
<p>Enlever la gousse de vanille et verser progressivement la...</p>
<p>Débarrasser la crème pâtissière dans un récipient.</p>
<p>Couvrir au contact la crème d’un film alimentaire et...</p>
</body>
</html>
Voir
Autre exemple : la lettrine en début de paragraphe
<!DOCTYPE html>
<html>
<head>
<style>
.lettre:first-letter {
float : left;
margin-right : 5 px;
font-size : 50px;
color:red;
font-family : Arial;
}
</style>
</head>
<body>
<h1>Crème pâtissière</h1>
<p class="lettre">Fendre la gousse de vanille en deux avec la pointe...</p>
<p>Faire bouillir...</p>
<p>Clarifier les œufs et réserver les blancs au frais...</p>
<p>Avec le fouet, blanchir énergiquement les jaunes d’oeufs avec...</p>
<p class="lettre">Enlever la gousse de vanille et verser progressivement la...</p>
<p>Débarrasser la crème pâtissière dans un récipient.</p>
<p>Couvrir au contact la crème d’un film alimentaire et...</p>
</body>
</html>
Voir
L'exemple ci-dessous montre que le bloc "contenu" est situé en dessous du bloc "menu" (aucune modification du flux des blocs) :
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-type: none;
}
#menu {
background-color:#FFC;
}
#contenu {
background-color: #CCF;
}
</style>
</head>
<body>
<h1>Pâtisserie</h1>
<div id="menu">
<ul>
<li>Tartes</li>
<li>Gâteaux</li>
<li>Divers</li>
</ul>
</div>
<div id="contenu">
<p> blablabla... blablabla...</p>
<p> blablabla... blablabla...</p>
</div>
</body>
</html>
Voir
Pour continuer l'exemple, on ajoute la propriété "float:left" sur le bloc d'id menu. On remarquera que le contenu entoure maintenant le menu.
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-type: none;
}
#menu {
float:left;
background-color:#FFC;
}
#contenu {
background-color: #CCF;
}
</style>
</head>
<body>
<h1>Pâtisserie</h1>
<div id="menu">
<ul>
<li>Tartes</li>
<li>Gâteaux</li>
<li>Divers</li>
</ul>
</div>
<div id="contenu">
<p> blablabla... blablabla...</p>
<p> blablabla... blablabla...</p>
</div>
</body>
</html>
Voir
Pour corriger cet enroulage autour du menu, on fixe une marge gauche à l'élément contenu
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-type: none;
}
#menu {
float:left;
background-color:#FFC;
}
#contenu {
background-color: #CCF;
margin-left : 150px;
}
</style>
</head>
<body>
<h1>Pâtisserie</h1>
<div id="menu">
<ul>
<li>Tartes</li>
<li>Gâteaux</li>
<li>Divers</li>
</ul>
</div>
<div id="contenu">
<p> blablabla... blablabla...</p>
<p> blablabla... blablabla...</p>
</div>
</body>
</html>
Voir
On met la propriété "float:left" pour les deux blocs précédents. On peut alors enlever la propriété de marge gauche pour le bloc "contenu".
Il est nécessaire cependant de spécifier une largeur pour le second bloc.
--> Conséquence : si la fenêtre du navigateur n'est plus assez large (ou si le site est consulté sur un écran type smartphone en vertical), le bloc "contenu" va flotter (glisser) en dessous du bloc menu:
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-type: none;
}
#menu {
float:left;
background-color:#FFC;
}
#contenu {
float:left;
width:500px;
background-color: #CCF;
}
</style>
</head>
<body>
<h1>Pâtisserie</h1>
<div id="menu">
<ul>
<li>Tartes</li>
<li>Gâteaux</li>
<li>Divers</li>
</ul>
</div>
<div id="contenu">
<p> blablabla... blablabla...</p>
<p> blablabla... blablabla...</p>
</div>
</body>
</html>
Voir