Die float Eigenschaft gibt , ob ein Element schweben sollte.
Die clear Eigenschaft wird verwendet , um das Verhalten von Floating - Elements zu steuern.
Der Schwimmer Property
In seiner einfachsten Verwendung, die float können Eigenschaft verwendet werden , um Text zu wickeln um Bilder.
Das folgende Beispiel gibt an, dass ein Bild auf der rechten Seite in einem Text schweben sollte:
Die clear Eigentum
Die clear Eigenschaft wird verwendet , um das Verhalten von Floating - Elements zu steuern.
Elemente nach einem Floating Element wird um ihn herum fließen. Um dies zu vermeiden, verwenden Sie die clear Eigenschaft.
Die clear Eigenschaft gibt , auf denen Seiten eines Elements Elemente schwimmend sind nicht floaten:
Die clearfix Hack - overflow: auto;
Wenn ein Element größer als das Element ist, enthält, und es schwimmt, wird er außerhalb des Containers Überlauf.
Dann können wir hinzufügen overflow: auto; zu enthaltenden Element dieses Problem zu beheben:
Web-Layout-Beispiel
Es ist üblich , ganze Web - Layouts mit dem zu tun , float Eigenschaft:
Beispiel
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} Versuch es selber " 
Mehr Beispiele
Ein Bild mit einem Rahmen und Margen , die in einem Absatz nach rechts schwimmt
ein Bild Schwimmer auf der rechten Seite in einem Absatz Lassen. Border und Margen auf das Bild.
Ein Bild mit einem Titel, der auf der rechten Seite schwimmt
ein Bild mit einer Bildunterschrift Schwimmer auf der rechten Seite zu lassen.
Lassen Sie den ersten Buchstaben eines Absatzes Schwimmer nach links
Lassen Sie den ersten Buchstaben eines Absatzes Schwimmer auf der linken Seite und den Brief Stil.
Erstellen eines horizontalen Menü
Verwenden Sie Schwimmer mit einer Liste von Hyperlinks eine horizontale Menü zu erstellen.
Erstellen einer Homepage ohne Tabellen
Verwenden Sie Schwimmer eine Homepage mit einem Header, Footer, links Inhalt und Inhalt zu erstellen.
Alle CSS-Float-Eigenschaften
| Eigentum | Beschreibung |
|---|---|
| clear | Gibt an, welche Seiten eines Elements in dem Schwimmelemente sind nicht erlaubt zu schweben |
| float | Gibt an, ob oder nicht sollte ein Element schweben |
| overflow | Gibt an, was geschieht, wenn der Inhalt ist ein Element-Box überläuft |
| overflow-x | Gibt an, was mit der linken / rechten Kanten des Inhalts zu tun, wenn sie den Inhalt des Elements Bereich überläuft |
| overflow-y | Gibt an, was mit den oberen / unteren Kanten des Inhalts zu tun, wenn sie den Inhalt des Elements Bereich überläuft |