Wie funktioniert Clear in CSS?

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.

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.

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.

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;
}

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>

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;
}

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!