Heim > Web-Frontend > CSS-Tutorial > Wie funktioniert Clear in CSS?

Wie funktioniert Clear in CSS?

WBOY
Freigeben: 2024-09-05 06:52:03
Original
1114 Leute haben es durchsucht

Hinweis: Ich habe gerade den Text unten übersetzt und hier gepostet. Referenzen finden Sie am Ende dieses Artikels.

Die CSS-Eigenschaft „clear“ funktioniert in Bezug auf die CSS-Eigenschaft „float“. Es definiert, ob ein Element unter die „schwebenden“ Elemente davor verschoben werden soll.

Lassen Sie uns dies anhand eines Beispiels verstehen.

Wir betrachten vier Blöcke rot, gelb, blau und grün, die nacheinander hinzugefügt und alle auf derselben Ebene platziert werden.

Como funciona o clear em CSS?

Dann lassen wir jedes Element einzeln nach „links“ „schweben“, was bedeutet, dass es eine Ebene über seine Ausgangsposition verschoben wird. Dadurch können sich andere „nicht schwebende“ Elemente um das schwebende Element wickeln.

Como funciona o clear em CSS?

Hinweis – Der nächste Block nimmt die Position des schwebenden Blocks ein und ist daher nicht sichtbar. Wenn wir die Dimension des nächsten Blocks ändern, stellen wir fest, dass er mit dem schwebenden Block bedeckt ist, der eine Schicht darüber liegt.

Danach wenden wir „clear:left“ auf den blauen Block an, was bedeutet, dass kein Element links vom blauen Block schweben wird.

Como funciona o clear em CSS?

Mit Hilfe der CSS-Eigenschaft „clear“ können wir angeben, welche Seite der Floating-Elemente den Float nicht ausführen kann. Es definiert oder gibt die Position in Bezug auf schwebende Objekte zurück.

Die in der CSS-Eigenschaft akzeptierten Werte sind klar

.element {
    clear: none;
    clear: left;
    clear: right;
    clear: both;
    clear: inline-start;
    clear: inline-end;

    clear: inherit;
    clear: initial;
    clear: revert;
    clear: revert-layer;
    clear: unset;
}
Nach dem Login kopieren

Unten finden Sie den Code für die oben gezeigten Beispiele:

HTML:

<div class="wrapper">
    <div class="red block"></div>
    <div class="yellow block"></div>
    <div class="blue block"></div>
    <div class="green block"></div>
</div>
Nach dem Login kopieren

CSS:

.wrapper{
    height:100vh;
    padding: 30px;
    text:center;
    background: #3A3B3C;
}
.block {
    height:40px;
    width:40px;
    border-radius: 4px;
}
.red {
    background: #CB6D51;
    float:left;
}
.yellow {
    background:#FBE7A1;
    float: left;
}
.blue {
    background: #3090C7;
    float: left;
    clear:both;
}
.green {
    background: #2E8B57;
    float: left;
}
Nach dem Login kopieren

Ich habe versucht, die Funktionsweise der CSS-Eigenschaft „clear“ anhand eines einfachen Beispiels zum besseren Verständnis zu erläutern. Bitte teilen Sie Ihre Beispiele und fügen Sie sie gerne zu diesem Beitrag hinzu?.

Viel Spaß beim Lernen!??‍?

Quelle

Artikel geschrieben von Jasmin Virdi.

Das obige ist der detaillierte Inhalt vonWie funktioniert Clear in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage