Heim > Artikel > Web-Frontend > Was ist der Code zum Löschen von Floats in CSS3?
Was ist der Code zum Löschen von Floats in CSS3?
- WBOYOriginal
- 2022-04-11 18:14:174611Durchsuche
Der Code lautet: 1. „.clear{clear:both}“, legt fest, dass die Elemente nicht nach links und rechts schweben; 2. „overflow:auto“, setzt den zu trimmenden Inhalt auf „Clear Floating“; Element: after{display:table; }“, legt das Element fest, das in einer Tabelle auf Blockebene angezeigt werden soll, und löscht den Float, wenn der verbleibende Platz gefüllt ist.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist der Code zum Löschen von Floats in CSS3?
Methode 1: Leere Elemente mit dem Attribut „clear“ verwenden cleared Das Label (theoretisch kann es jedes beliebige Label sein, häufig werden jedoch dc6dce4a544fdca2df29d5ac0ea9906b und e388a4556c0f65e1904146cc1a846bee verwendet) löscht den Float und definiert den CSS-Code clear:both dafür.
Codebeispiel:
<!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>Vorteile: einfach, weniger Code, gute Browserkompatibilität.
Nachteile: Es muss eine große Anzahl nicht semantischer HTML-Elemente hinzugefügt werden, der Code ist nicht elegant genug und später nicht einfach zu warten.
Methode 2: Verwenden Sie die Overflow-Eigenschaft von CSS.Verwenden Sie Overflow, um Float zu löschen: Definieren Sie einfach den CSS-Code overflow:auto oder overflow:hidden in dem Element, in dem der Float gelöscht werden muss. Codebeispiel:
<!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>Vorteile: Es gibt keine strukturellen und semantischen Probleme und die Codemenge ist sehr gering.
Nachteile: Wenn der Inhalt zunimmt, kann es leicht zu einem automatischen Zeilenumbruch kommen, wodurch der Inhalt ausgeblendet wird , und Elemente, die überlaufen müssen, können nicht angezeigt werden
Methode 3: Verwenden Sie CSSs :after-PseudoelementVerwenden Sie das :after-Pseudoelement für das übergeordnete Element und legen Sie display:table fest. display:table bewirkt, dass die generierten Elemente in einer Tabelle auf Blockebene angezeigt werden und den verbleibenden Platz belegen.
Inhalt als letztes Element durch „Content“ generieren. Der Inhalt in „Content“ kann alles sein. Das klassische CSS ist „Content“. In einigen Versionen kann der Inhalt in „Content“ leer sein.
Codebeispiel:
<!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>Nachteile: geeignet für moderne Browser, unterstützt IE6/7 nicht, *Zoom: 1 soll mit IE6/7 kompatibel sein
(Lernvideo-Sharing:
CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWas ist der Code zum Löschen von Floats in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!