La propriété CSS float indique qu'un élément doit être retiré du flux normal et doit être placé sur
le côté
droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline) entoureront
alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux
(contrairement au positionnement absolu).
Syntaxe
/* Valeurs avec un mot-clé */
float: left;
float: right;
float: none;
Valeurs
left :Un mot-clé indiquant que l'élément doit flotter du côté
gauche du bloc qui le contient.
right :Un mot-clé indiquant que l'élément doit flotter du côté droit
du bloc qui le contient.
none :Un mot-clé indiquant que l'élément ne doit pas flotter.
Clear ( Dégager des éléments du flottement )
Parfois, on veut forcer le déplacement d'un élément sous les éléments flottants.
La propriété clear indique si un élément peut être situé à côté d'éléments flottants qui le précèdent ou s'il
doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété clear s'applique aux
éléments flottants comme aux éléments non-flottants.
Exemple ( structure d’une page web utilisant les balises sémantiques )
Solution: https://brickaa.github.io/exercises/floats/index.html
Systèmes, technologies et
Internet
Systèmes, technologies et
Internet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header{
height: 100px;
background-color: antiquewhite;
}
main{
height: 500px;
background-color: rgb(251, 178, 84);
margin-top: 10px;
width: 20%;
float: left;
}
aside{height: 500px;
background-color: rgb(134, 253, 213);
Systèmes, technologies et
Internet
margin-top: 10px;
width: 80%;
float: left;}
footer{
clear: both;
height: 100px;
background-color: rgb(251, 178, 84);
/* margin-top: 10px;} */
position: relative;
top:10px;
}
</style>
</head>
<body>
<header></header>
<main></main>
<aside></aside>
<footer></footer>
</body>
</html>
<!-- header{height: 100px;
background-color: antiquewhite;
border:2px dashed rgb(72, 172, 253);
padding: 10px;
box-sizing: border-box;
}
main{height: 400px;
background-color: rgb(254, 201, 132);
border:2px dashed rgb(72, 172, 253);
padding: 10px;
box-sizing: border-box;}
footer{
/* position: relative;
top:10px; */
margin-top: 10px;
height: 100px;
background-color: rgb(253, 231, 201);
border:2px dashed rgb(72, 172, 253);
padding: 10px;
box-sizing: border-box;} -->
Systèmes, technologies et
Internet
<!DOCTYPE html> top: 0;
<html lang="fr"> left: 0;
<head> width: 100%;
<meta charset="UTF-8"> background-color: #4CAF50;
<meta name="viewport" color: white;
content="width=device-width, initial- text-align: center;
scale=1.0"> padding: 20px 0;
<title>Page Web avec CSS Absolute</title> }
<link rel="stylesheet" href="styles.css">
<style> .container {
body { position: absolute;
margin: 0; top: 200px; /* Ajuster en fonction de la
font-family: Arial, sans-serif; hauteur de l'en-tête */
} left: 0;
right: 0;
header { bottom: 40px; /* Ajuster en fonction de la
position: absolute; hauteur du pied de page */
Systèmes, technologies et
Internet
display: block; background-color: #333;
} color: white;
text-align: center;
.colonne { padding: 10px 0;
position: absolute; }
top: 0; </style>
width: 30%; /* Largeur de chaque colonne */ </head>
padding: 20px; <body>
box-sizing: border-box; <header>
background: #4CAF50; <h1>Mon Site Web</h1>
} </header>
<div class="container">
.colonne1 { <section class="colonne colonne1">
left: 0; <h2>Section 1</h2>
} <p>Contenu de la section 1.</p>
</section>
.colonne2 { <section class="colonne colonne2">
left: 35%; /* Espace pour la première <h2>Section 2</h2>
colonne */ <p>Contenu de la section 2.</p>
} </section>
<section class="colonne colonne3">
.colonne3 { <h2>Section 3</h2>
left: 70%; /* Espace pour la première et la <p>Contenu de la section 3.</p>
deuxième colonne */ </section>
} </div>
<footer>
footer { <p>Pied de page</p>
position: absolute; </footer>
bottom: 0; </body>
left: 0; </html>
width: 100%;
La propriété CSS float indique qu'un élément doit être retiré du flux normal et doit être placé sur le
côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline)
entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit
toujours dans le flux (contrairement au positionnement absolu).
float implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur
de display dans certains cas
/* Valeurs avec un mot-clé */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
Valeurs
left
Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient.
Systèmes, technologies et
Internet
right
Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient.
none
Un mot-clé indiquant que l'élément ne doit pas flotter.
Dégager des éléments du flottement
Parfois, on veut forcer le déplacement d'un élément sous les éléments flottants.
Systèmes, technologies et
Internet
