Qu'est-ce que le flotteur ?
float est flottant. Sa fonction en CSS est de sortir l'élément du flux normal du document et de le déplacer vers "l'extrême gauche" ou "l'extrême droite" de son élément parent. Ce qui suit explique les concepts de plusieurs noms dans cette définition :
Flux de documents : En HTML, le flux de documents est l'ordre dans lequel les éléments sont disposés de haut en bas.
Hors flux de documents : les éléments sont retirés de leur ordre normal.
Le plus à gauche/à droite : le mouvement mentionné ci-dessus vers l'extrême gauche et l'extrême droite de l'élément parent signifie que l'élément se déplace vers la gauche ou la droite jusqu'à ce qu'il touche un autre élément flottant ou la limite de la zone de contenu de l'élément parent ( hors rembourrage).
attribut float :
① left : L'élément flotte vers la gauche.
② droite : L'élément flotte vers la droite.
③ aucun : Valeur par défaut.
④ hériter : hérite de l'attribut float de l'élément parent.
Exemple : Flotter à gauche
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:left;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>Exemple : Flotter à droite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:right;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
float:right;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>
Éléments flottants les uns à côté des autres
Si vous assemblez plusieurs éléments flottants, ils seront côte à côte s'il y a de la place.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
div
{
float:left;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>
Clear float - Après avoir utilisé clear
pour faire flotter l'élément, les éléments environnants seront réorganisés. Pour éviter cela, utilisez le clear. attribut . L'attribut
clear spécifie que les éléments flottants ne peuvent pas apparaître des deux côtés de l'élément.
section suivante