Achten wir auf die Nachteile von Float. Wie sich Block- und Inline-Elemente miteinander verhalten und ob sie zusammen verwendet werden sollen. Lassen Sie uns analysieren, was ein Verlust ist und wie man damit umgeht.
Obwohl wir im letzten Artikel ein einfaches Raster für die Site mit Floats erstellt haben, sollen diese ursprünglich den Fluss der Elemente im Text anpassen. Float hat drei Bedeutungen: left - die Elemente bleiben am linken Rand; rechts - Elemente werden an den rechten Rand gedrückt; none - Wrap-Modus ist deaktiviert.
Ein Float-Wrapped-Element kann in der Größe und aufgefüllt werden, aber wenn das Element inline ist, verhält es sich wie ein Blockelement.
. Block 1 {
Schwimmer: links;
Breite: 150px;
}
.block2 {
schweben rechts;
Breite: 150px;
}
Bei der Verwendung von Schwimmern gibt es ein weiteres Problem, das aus dem Bach fällt. Es erscheint, wenn die Blöcke nacheinander gehen, aber nur einer von ihnen die float-Eigenschaft hat, dann wird er über den Rest gelegt, weil er keine anderen Blöcke sieht. Inline-Elemente werden um float-Elemente gewickelt, aber der Block, der diesen Text enthält, bleibt unter dem float-Element.
Aber wie interagiert float mit float?
Sie verhalten sich wie ein Text: Sie stehen nacheinander, solange noch Platz ist, und bewegen sich dann in eine neue Zeile. Daher begannen wir mit Hilfe von Schwimmern, Gitter zu bauen. Wenn kein Platz mehr vorhanden ist, werden sie über die Breite der Site hinaus verschoben, dh sie gehen nirgendwo hin.
Wenn der Schwimmer einfache Blockelemente nicht sieht, kann den Blockelementen beigebracht werden, den Schwimmer zu sehen. Wir verwenden die clear-Eigenschaft, die das Umschließen von allen Seiten (oder von ausgewählten) deaktiviert. Das heißt, ein Element mit clear fällt unter das Element mit float.
