Quel est le code pour effacer les flottants en CSS3-Questions et réponses frontales-php.cn

Quel est le code pour effacer les flottants en CSS3

WBOY

Libérer： 2022-04-11 18:37:25

original

4624 Les gens l'ont consulté

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.

Quel est le code pour effacer les flottants en CSS3

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

) 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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!