Heim >Web-Frontend >CSS-Tutorial >So löschen Sie Float in CSS
So löschen Sie Float in CSS
- 醉折花枝作酒筹Original
- 2021-04-06 18:16:114651Durchsuche
So löschen Sie Floats: 1. Definieren Sie die Höhe des übergeordneten Div mit der Syntax „height: height“. 2. Fügen Sie am Ende ein leeres Div hinzu und legen Sie den Stil „clear:both“ fest. 3. Definieren Sie die Pseudoklasse „:after“ auf dem übergeordneten Div und Zoom 4. Das übergeordnete Div definiert „overflow:hidden“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Floating führt dazu, dass das aktuelle Etikett nach oben schwebt, und wirkt sich auch auf die Positions- und Breitenhöhenattribute der vorderen und hinteren Etiketten sowie der übergeordneten Etiketten aus.
Und derselbe Code kann in verschiedenen Browsern unterschiedlich angezeigt werden, was das Löschen von Floats schwieriger macht.
Es gibt viele Möglichkeiten, durch Floats verursachte Probleme zu lösen, aber einige Methoden haben Probleme mit der Browserkompatibilität.
1. Höhe der übergeordneten Div-Definition
<!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>Prinzip: Die manuelle Definition der Höhe des übergeordneten Divs löst das Problem, dass das übergeordnete Div die Höhe nicht automatisch ermitteln kann.
Vorteile: einfach, weniger Code, leicht zu beherrschen
Nachteile: Nur für Layouts mit fester Höhe geeignet, die genaue Höhe muss angegeben werden, wenn die Höhe vom übergeordneten Div abweicht.
2 am Ende Leeres Div-Tag klar: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><div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">div2</div>Prinzip: Fügen Sie ein leeres Div hinzu und verwenden Sie „clear:both“, das durch CSS verbessert wurde, um den Float zu löschen, sodass das übergeordnete Div automatisch die Höhe erhalten kann
Vorteile: einfach, weniger Code , gute Browserunterstützung, Es ist nicht leicht, seltsame Probleme zu haben
Nachteile: Viele Anfänger verstehen das Prinzip nicht; wenn es viele schwebende Layouts auf der Seite gibt, werden viele leere Divs hinzugefügt, was den Leuten ein sehr unangenehmes Gefühl gibt
3. Pseudoklassen der übergeordneten Div-Definition: after und zoom
<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><div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>Prinzip: Nur IE8 und höher sowie Nicht-IE-Browser unterstützen :after. Das Prinzip ähnelt in gewisser Weise der Methode 2. zoom (IE-Konvertierung hat Attribute) kann das schwebende Problem von ie6 und ie7 lösen
Vorteile: Gute Browserunterstützung, nicht einfach. Es treten seltsame Probleme auf (derzeit: Wird von großen Websites wie Tencent, NetEase, Sina usw. verwendet)
Nachteile: Es gibt viele Codes , und viele Anfänger verstehen das Prinzip nicht, um die Verwendung von zwei Codezeilen in Kombination mit Mainstream-Browsern zu ermöglichen.
4. Überlauf der übergeordneten Div-Definition: ausgeblendet
<style type="text/css">
.div1{
background:#000080;
border:1px solid red;
/*解决代码*/
width:98%;
overflow:hidden
}
.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><div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>Prinzip: Breite oder Zoom: 1 muss definiert werden, und die Höhe kann nicht definiert werden. Bei Verwendung von overflow:hidden prüft der Browser automatisch die Höhe des schwebenden Bereichs
Vorteile : Einfach, weniger Code, gute Browserunterstützung
Nachteile: Kann nicht mit Position verwendet werden, da die überschrittene Größe ausgeblendet wird.
Lernvideo-Sharing: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo löschen Sie Float in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!