Qu'est-ce que le flotteur ?
Float est souvent utilisé pour les images, mais il est également très utile en mise en page
Comment les éléments flottent
L'élément flotte horizontalement, ce qui signifie que l'élément ne peut se déplacer que vers la gauche et la droite, mais pas de haut en bas. Un élément flottant se déplacera aussi loin que possible vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.
Les éléments après l'élément flottant l'entoureront.
Les éléments situés avant l'élément flottant ne seront pas affectés.
Si l'image flotte à droite, le flux de texte ci-dessous s'enroulera à gauche de celle-ci
div{
float:right;
}
Ci-dessous nous ferons un exemple : par exemple, il y a 2 divs avec des backgrounds différents
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
/*在这里会用到id选择器*/
div{
width:600px;
height:600px;
border:1px solid black;
}
#dv1{
width:100px;
height:100px;
background-color:green;
float:left;
}
#dv2{
width:100px;
height:100px;
background-color:red;
float:left;
}
</style>
</head>
<body>
<div>
<div id='dv1'></div>
<div id='dv2'></div>
</div>
</body>
</html>section suivante
