Maison >interface Web >tutoriel CSS >Comment effacer le flotteur en CSS
Comment effacer le flotteur en CSS
- 醉折花枝作酒筹original
- 2021-04-06 18:16:114616parcourir
Méthode pour effacer le flottant : 1. Définissez la hauteur dans le div parent avec la syntaxe "height: height" 2. Ajoutez un div vide à la fin et définissez le style "clear:both" ; la pseudo-classe dans le div parent ":after" et zoom ; 4. Le div parent définit "overflow:hidden".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Flottant fera flotter l'étiquette actuelle vers le haut et affectera également la position des étiquettes avant et arrière, l'étiquette parent et l'attribut largeur hauteur.
Et le même code peut s'afficher différemment dans différents navigateurs, ce qui rend la suppression des flottants plus difficile.
Il existe de nombreuses façons de résoudre les problèmes causés par le flottement, mais certaines méthodes ont des problèmes de compatibilité avec les navigateurs.
1. Hauteur de définition du div parent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.div1{
background:#000080;
border:1px solid red;
/*解决代码*/
height:200px;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px;
width:98%
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
</style>
</head>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
</body>
</html>Principe : Définir manuellement la hauteur du div parent pour résoudre le problème. problème Le div parent ne peut pas obtenir automatiquement la hauteur.
Avantages : simple, moins de code, facile à maîtriser
Inconvénients : convient uniquement aux mises en page à hauteur fixe. Pour donner une hauteur précise, des problèmes surviendront si la hauteur est différente de celle du div parent. .
2. Ajoutez une balise div vide à la fin clear:both
<style type="text/css">
.div1{
background:#000080;
border:1px solid red
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
/*清除浮动代码*/
.clearfloat{
clear:both
}
</style>rrreePrincipe : ajoutez un div vide, utilisez clear:both amélioré par css pour effacer le. flotter et laisser le parent Le div peut obtenir automatiquement la hauteur
Avantages : Simple, moins de code, bon support du navigateur, pas sujet à des problèmes étranges
Inconvénients : De nombreux débutants ne comprennent pas le principe ; si la page a de nombreuses mises en page flottantes, il est nécessaire d'ajouter beaucoup de divs vides, ce qui met les gens très mal à l'aise
Pseudo-classe de définition de div parent : après et zoom<.>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">div2</div><style type="text/css">
.div1{
background:#000080;
border:1px solid red;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
/*清除浮动代码*/
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat{
zoom:1
}
</style>Principe : IE8 ou supérieur et les navigateurs non IE ne prennent en charge que :after. Le principe est quelque peu similaire à la méthode 2. Zoom (la conversion IE a des attributs) peut résoudre le problème flottant de ie6 et ie7 Avantages : Le navigateur a un bon support et n'est pas sujet à des problèmes étranges (actuellement : Utilisé par les grands sites Web, tels que : Tencent, NetEase, Sina, etc.) Inconvénients : Il y a beaucoup de code , et de nombreux débutants ne comprennent pas le principe. Deux lignes de code doivent être utilisées en combinaison pour être prises en charge par les navigateurs grand public.
4. Débordement de définition du div parent : caché
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>rrreePrincipe : la largeur ou le zoom : 1 doit être défini et la hauteur ne peut pas être définie. Lors de l'utilisation de , parcourir Le navigateur vérifiera automatiquement la hauteur de la zone flottanteoverflow:hidden
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!