Was ist Float? Warum Float verwenden? In diesem Artikel erfahren Sie, was Float ist, welche Rolle Float im Layout spielt und wie Float gelöscht wird. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Lassen Sie uns zunächst verstehen Was ist Float?
float ist ein Positionierungsattribut von CSS. Um seinen Zweck und Ursprung zu verstehen, können wir uns das typografische Design ansehen. In einem Drucklayout können Sie Bilder so auf der Seite platzieren, dass sie vom Text wie gewünscht umbrochen werden. Dies wird oft treffend als „Textumbruch“ bezeichnet. Hier ist ein Beispiel:
Im Seitenlayoutprogramm kann das Feld mit dem Text angewiesen werden, dem Textumbruch zu folgen oder ihn zu ignorieren. Wenn Sie den Textumbruch ignorieren, fließen die Wörter über das Bild, als ob es gar nicht vorhanden wäre. Dies ist der Unterschied, ob das Bild Teil des Seitenflusses ist (oder nicht). Webdesign ist sehr ähnlich.
Im Webdesign verhalten sich Seitenelemente, auf die die CSS-Float-Eigenschaft angewendet wird, wie Bilder mit umgebendem Text in einem Drucklayout. Schwebende Elemente sind immer noch Teil des Flusses der Webseite. Dies unterscheidet sich deutlich von der Verwendung absolut positionierter Seitenelemente. Absolut positionierte Seitenelemente werden aus dem Webseitenfluss entfernt, genau wie Textfelder in Drucklayouts angewiesen werden, Seitenumbrüche zu ignorieren. Absolut positionierte Seitenelemente haben keinen Einfluss auf die Position anderer Elemente, und auch andere Elemente haben keinen Einfluss auf sie, unabhängig davon, ob sie sich berühren.
Die Verwendung von CSS zum Festlegen von Float für ein Element geschieht wie folgt:
.demo {
float: right;
}Das Float-Attribut hat vier gültige Werte:
left: Legt fest Element nach links schweben;
rechts: Element so einstellen, dass es nach rechts schwebt;
keine: Standardwert, Element nicht so einstellen, dass es nach rechts schwebt;
erben: Angeben dass der Wert des Float-Attributs vom übergeordneten Element geerbt werden soll.
Warum Float verwenden?
Floating hilft auch beim Layout in kleineren Bereichen. Nehmen Sie zum Beispiel diesen kleinen Bereich einer Webseite. Wenn wir Float für unser kleines Avatar-Bild verwenden und sich die Größe dieses Bildes ändert, wird der Text im Feld so angepasst, dass er passt:
unter Verwendung der relativen Positionierung auf dem Container und dergleichen Das Layout kann auch mit absoluter Positionierung auf dem Avatar erreicht werden. Auf diese Weise wird der Text nicht durch den Avatar beeinflusst und kann nicht umfließen, wenn sich die Größe ändert.
Warum müssen wir Schwimmer räumen?
float (float) ermöglicht das Entfernen des Elements aus dem normalen Fluss und die Anzeige anderer Elemente daneben. Wenn wir also verhindern möchten, dass nachfolgende Elemente nach oben verschoben werden (wie unten gezeigt, Verhindern Sie, dass die Fußzeile nach oben verschoben wird), was das Löschen erfordert. Wir müssen den Float der Fußzeile löschen, um sicherzustellen, dass er sich unter den beiden Float-Spalten befindet. Um dieses Problem zu lösen, müssen Sie das Attribut „clear“ verwenden.
.footer {
clear: both;
}
Das Attribut „clear“ hat fünf gültige Werte:
links: löscht diejenigen, die auf dem schweben linkes Element.
rechts: Klare Elemente, die rechts schweben.
beides: Klare Elemente, die sowohl auf der linken als auch auf der rechten Seite schweben.
keine: Standardwert, der das Erscheinen schwebender Elemente auf beiden Seiten ermöglicht. Normalerweise ein Wert, der unnötig ist, es sei denn, der klare Wert wird aus der Kaskade entfernt.
inherit: Die Einstellung gibt an, dass der Wert des Clear-Attributs vom übergeordneten Element geerbt werden soll.
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels zu Float-bezogenen Themen. Ich hoffe, dass er für das Studium aller hilfreich sein wird.
Das obige ist der detaillierte Inhalt vonWas ist Float? Detaillierte Erläuterung des Float-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
