CSS float
float : laisse l'élément flotter, valeurs : gauche (flottant à gauche), droite (flottant à droite)
L'élément flottant flottera vers la gauche ou la droite jusqu'à ce qu'il flotte jusqu'au bord de l'élément environnant ou au bord de l'élément flottant précédent.
Les éléments flottants ne prennent plus de place, et le niveau des éléments flottants est supérieur à celui des éléments ordinaires.
Les éléments flottants doivent être des "éléments de bloc". Quel que soit l’élément dont il s’agissait à l’origine.
Si l'élément flottant ne spécifie pas de largeur, il sera aussi étroit que possible après le flottage. Les éléments flottants ont donc généralement une largeur et une hauteur fixes.
Plusieurs éléments consécutifs doivent flotter ensemble.
Fonction flottante : plusieurs éléments de bloc peuvent être disposés côte à côte.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
width:350px;
height:400px;
background-color:#f0f0f0;
}
.box1{
width:50px;
height:50px;
background-color:#ff0000;
float:left;
}
.box2{
width:50px;
height:50px;
background-color:#00ff00;
float:left;
}
.box3{
width:50px;
height:50px;
background-color:#0000ff;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">php.cn</div>
<div class="box2">php.cn</div>
<div class="box3">php.cn</div>
</div>
</body>
</html>Q : Comment entourer des éléments et envelopper des éléments flottants ?
À ce stade, nous avons besoin des connaissances de la section suivante. Sous l'élément flottant, utilisez l'opération clear float.
section suivante