Was ist der Code zum Löschen von Floats in CSS3?-Front-End-Fragen und Antworten-php.cn

Was ist der Code zum Löschen von Floats in CSS3?

WBOY

Freigeben： 2022-04-11 18:37:25

Original

4606 Leute haben es durchsucht

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.

Was ist der Code zum Löschen von Floats in CSS3?

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

und

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!