Maison > Article > interface Web > Quel est le code pour effacer les flottants en CSS3
Quel est le code pour effacer les flottants en CSS3
- WBOYoriginal
- 2022-04-11 18:14:174611parcourir
Le code est : 1. ".clear{clear:both}", stipule que les éléments ne flottent pas à gauche et à droite ; 2. "overflow:auto", définit le contenu à découper pour effacer le flottement ; Element: after{display:table; }", définit l'élément à afficher dans un tableau au niveau du bloc et efface le flottant lorsque l'espace restant est rempli.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Quel est le code pour effacer les flottants en CSS3
Méthode 1 : Utilisez des éléments vides avec l'attribut clear
Utilisez des balises vides pour effacer les flottants : Ajoutez un élément vide après tous les éléments flottants à l'intérieur de l'élément parent qui doivent être cleared L'étiquette (en théorie, il peut s'agir de n'importe quelle étiquette, mais couramment utilisée dc6dce4a544fdca2df29d5ac0ea9906b et e388a4556c0f65e1904146cc1a846bee) efface le flottant et définit le code CSS clear:both pour celui-ci.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
</body>
</html>Avantages : simple, moins de code, bonne compatibilité avec les navigateurs.
Inconvénients : Un grand nombre d'éléments html non sémantiques doivent être ajoutés, le code n'est pas assez élégant et il n'est pas facile à maintenir par la suite.
Méthode 2 : Utilisez la propriété overflow de CSS
Utilisez overflow pour effacer float : Définissez simplement le code CSS overflow:auto ou overflow:hidden dans l'élément où le float doit être effacé.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
overflow:hidden
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>Avantages : il n'y a pas de problèmes structurels et sémantiques, et la quantité de code est très faible
Inconvénients : lorsque le contenu augmente, il est facile de faire en sorte que le contenu ne s'enroule pas automatiquement, ce qui entraîne le contenu être masqué et les éléments qui doivent déborder ne peuvent pas être affichés
Méthode 3 : utilisez le pseudo-élément :after de CSS
Utilisez le pseudo-élément :after sur l'élément parent et définissez display:table.
display:table provoque l'affichage des éléments générés dans un tableau au niveau du bloc, occupant l'espace restant.
Générer du contenu comme dernier élément via content : " ". Quant au contenu dans content, il peut être n'importe quoi. Le CSS classique est content : ".". Dans certaines versions, le contenu dans content peut être vide.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
*zoom: 1;
}
.demo:after {
content: " ";
display: table;
clear: both;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>Inconvénients : convient aux navigateurs modernes, ne prend pas en charge IE6/7, *zoom : 1 doit être compatible avec IE6/7
(Apprentissage du partage vidéo : Tutoriel vidéo CSS)
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!