Maison >interface Web >tutoriel CSS >Explication détaillée sur l'utilisation de l'attribut flottant float en CSS [exemple de code]
Explication détaillée sur l'utilisation de l'attribut flottant float en CSS [exemple de code]
- 藏色散人original
- 2018-08-29 15:36:297179parcourir
Lorsque nous mettons en page la page, nous utilisons souvent l'attribut flottant CSS, qui est aussi l'attribut float Donc pour les novices, ce point de connaissance doit être maîtrisé. Sinon, une page Web complète sera difficile à réaliser. Cet article va donc vous donner une introduction détaillée à l’utilisation spécifique de l’attribut CSS float. J'espère que cela aide tout le monde.
Ci-dessous, nous vous donnerons une introduction détaillée à travers des exemples de code spécifiques
1. Exemple de code d'attribut flottant CSS-float right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css float right属性使用示例</title>
<style>
.demo{
width: 500px;height: 400px;
background-color: #b2ecef;
}
img{
width:100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="demo">
<img src="/test/img/1.png" alt="Explication détaillée sur l'utilisation de l'attribut flottant float en CSS [exemple de code]" >
<img src="/test/img/2.png" alt="Explication détaillée sur l'utilisation de l'attribut flottant float en CSS [exemple de code]" >
</div>
</body>
</html>Dans le code ci-dessus, j'ai défini deux images img dans le div. Sans ajouter le style d'attribut float right aux images, l'effet est celui illustré dans la figure 1 :
![Explication détaillée sur lutilisation de lattribut flottant float en CSS [exemple de code]](https://img.php.cn//upload/image/263/674/666/1535526309154409.png "1535526309154409.png")
Ensuite. nous donnons Après avoir ajouté l'attribut float right à l'image img, l'effet est comme le montre la figure 2 :
![Explication détaillée sur lutilisation de lattribut flottant float en CSS [exemple de code]](https://img.php.cn//upload/image/585/377/962/1535526355138310.png "1535526355138310.png")
Je crois que vous avez découvert quelques changements par rapport à la comparaison entre la figure 1 et la figure 2. Lorsque l'attribut flottant CSS n'est pas défini dans la figure 1, les deux images img sont affichées de gauche à droite sur la même ligne et il y a un espace entre les deux images. Dans la figure 2, après avoir ajouté l'attribut flottant float right, les deux éléments img ont commencé à flotter et à s'afficher de droite à gauche sans aucun espace. Si nous avons besoin d'un espace à ce moment-là, nous devons utiliser l'attribut padding. Nous pouvons donc savoir que l'attribut flottant CSS float peut contrôler l'élément pour qu'il flotte vers la droite en définissant la bonne valeur .
2. Exemple de code d'attribut flottant CSS-float left
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css float left属性使用示例</title>
<style>
.demo{
width: 100px;height: 100px;
background-color: #ccccff;
}
.demo1{
float: left;
width: 100px;height: 100px;
background-color: #b2ecef;
}
</style>
</head>
<body>
<div class="demo">
</div>
<div class="demo1">
</div>
</body>
</html>Dans le code ci-dessus, nous avons configuré deux blocs div, qui sont affichés dans des couleurs différentes. . Si l'attribut float n'est pas défini, l'effet est comme indiqué dans la figure 3 :
![Explication détaillée sur lutilisation de lattribut flottant float en CSS [exemple de code]](https://img.php.cn//upload/image/149/918/819/1535527044234495.png "1535527044234495.png")
Ensuite, après avoir défini l'attribut float left, après l'accès au navigateur, l'effet est comme indiqué ci-dessous 4 :
![Explication détaillée sur lutilisation de lattribut flottant float en CSS [exemple de code]](https://img.php.cn//upload/image/745/504/660/1535527094464643.png "1535527094464643.png")
En comparant la figure 3 et la figure 4, nous pouvons clairement constater que l'élément demo1 flotte vers la gauche. De même, si nous voulons un écart entre deux éléments, nous pouvons y parvenir grâce à l'attribut padding.
Pour résumer, l'attribut CSS float peut contrôler n'importe quel élément pour qu'il flotte à gauche ou à droite. La propriété CSS float peut être utilisée non seulement pour contrôler le flottement des images, mais également pour contrôler le flottement du texte. [Vous pouvez vous référer au tutoriel en ligne du site Web PHP chinois : Tutoriel d'introduction de base CSS 0 - CSS Float (floating)]
Cet article a une certaine valeur de référence, je j'espère être utile aux amis dans le besoin.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!