Das klar Die CSS-Eigenschaft ist seit CSS1 Bestandteil von CSS. Hier können Sie angeben, welche Elemente neben dem gelöschten Element auf welcher Seite schwimmen können. Das klar Eigenschaft hat fünf mögliche Werte:
keinerlinksRechtbeideerben
So verwenden Sie die CSS clear-Eigenschaft
Die gebräuchlichste Art der Verwendung der klar Eigenschaft ist, nachdem Sie ein verwendet haben schweben Eigenschaft für ein Element. Zum Beispiel:
- Text neben meinem Bild.
- Text, der unter meinem Bild ist.
Alle Elemente sind standardmäßig auf gesetzt klar: keine;Wenn Sie also nicht möchten, dass andere Elemente neben etwas schweben, müssen Sie das ändern klar Stil.
Wenn Sie Schwimmer löschen, passen Sie Ihre Freigabe an Ihren Schwimmer an. Wenn Sie also das Element nach links geschoben haben, sollten Sie es nach links löschen. Ihr schwebendes Element wird weiterhin gleiten, aber das gelöschte Element und alles danach wird auf der Webseite darunter angezeigt.
Wenn Sie Elemente haben, die sowohl nach rechts als auch nach links verschoben werden, können Sie nur eine Seite löschen oder Sie können sie löschen beide.
Klar in Layouts verwenden
In der Regel verwenden die meisten Designer die klar Eigenschaft ist im Layout der Seitenelemente. Möglicherweise haben Sie ein Bild in einem Textblock und möchten, dass der nächste Absatz unter dem Bild beginnt, oder Sie haben eine gesamte Textspalte, die Sie neben einem anderen Textblock schweben möchten, darunter etwas Text.
Hier ist der HTML-Code für ein Layout in diesem Formular. Es hat einen Div-Container, der einen anderen hält, der nach links schwimmt.
Dies funktioniert gut, wobei das kürzere div links vom Rest des Inhalts des main-Divs angezeigt wird. Sie können den Text neben dem floated-Feld löschen, indem Sie einfach ein Tag hinzufügen, an dem das Schreiben unter dem floated-Feld beginnen soll. Das Problem tritt jedoch auf, wenn die schwebende Box länger ist als der Inhalt daneben. Dann wird, wie Sie sehen können, die Hintergrundfarbe der Hauptbox nicht bis zum unteren Rand der Float-Box heruntergefahren. Glücklicherweise gibt es eine einfache Möglichkeit, dies zu beheben: die Eigenschaft. Setzen Sie das Hauptfeld auf
Ein kurzes Float-Div
Inhalt des Containers div, der sich rechts neben dem floated div befindet.Überlauf: Auto; Die Hintergrundfarbe bleibt, wie in diesem Beispiel gezeigt, ganz unten neben dem längeren schwebenden Kästchen.
