Originaltext : Alles über Floats
Übersetzung : Über das vergangene und gegenwärtige Leben der Schwebenden
Alle Rechte vorbehalten. Bitte geben Sie beim Nachdruck die Quelle an. !
Was ist ein Float?
Float ist eine Positionierungseigenschaft von CSS. Wir können uns typografisches Design ansehen, um seinen Ursprung und seine Rolle zu verstehen. In einem Drucklayout kann Text das Bild beliebig umgeben. Diese Methode wird allgemein als „Textumbruch“ bezeichnet.
Hier ist ein Beispiel:
In Satzsoftware kann das Textfeld so eingestellt werden, dass ein gemischtes Layout von Bildern und Text möglich ist oder dass es ignoriert wird. Keine Text-Bild-Mischung führt dazu, dass der Text über dem Bild erscheint, als ob er gar nicht vorhanden wäre. Dies ist der Unterschied, ob ein Bild Teil des Seitenflusses ist oder nicht. Webdesign ist dem sehr ähnlich.
Im Webdesign ähneln Seitenelemente, auf die das CSS-Attribut float angewendet wird, wie von Text umgebene Bilder in einem typografischen Layout. Schwebende Elemente sind immer noch Teil des Flusses der Webseite. Dies ist ein wesentlicher Unterschied zur Verwendung absolut positionierter Seitenelemente. Absolut positionierte Seitenelemente werden aus dem Seitenfluss entfernt, genau wie Textfelder in Drucklayouts so eingestellt sind, dass sie den Seitenumbruch ignorieren. Ein absolut positioniertes Element hat keinen Einfluss auf andere Elemente, und andere Elemente haben keinen Einfluss darauf, unabhängig davon, ob es sich neben anderen Elementen befindet.
Legen Sie mit CSS einen Float für ein Element wie dieses fest:
#sidebar { float: right;
Das fload-Attribut verfügt über vier verfügbare Werte: „Left“ und „Right“ lassen das Element in seine jeweilige Richtung schweben, „None“ (Standard) bewirkt, dass das Element nicht „float“ ist, und „Inherit“ ruft den Float-Wert vom übergeordneten Element ab.