Der Unterschied zwischen Float- und Positionsattributen im CSS-Layout

CSS-Layout – Positionseigenschaft

Das Positionsattribut gibt den Typ der Positionierungsmethode (statisch, relativ, fest, absolut oder klebrig) an, die auf ein Element angewendet werden soll.

Die Position-Eigenschaft

Das Positionsattribut gibt den Typ der Positionierungsmethode an, die auf ein Element angewendet werden soll.

Es gibt fünf verschiedene Positionswerte:

statisch
relativ
behoben
Absolute
klebrig

Elemente werden tatsächlich mithilfe der Attribute oben, unten, links und rechts positioniert. Diese Eigenschaften haben jedoch keine Auswirkung, wenn nicht zuerst die Positionseigenschaft festgelegt wird. Sie funktionieren je nach Positionswert unterschiedlich.

CSS-Layout - Schweben und Löschen

Float-Eigenschaft
Mit der Float-Eigenschaft werden Inhalte positioniert und formatiert, z. B. kann ein Bild links neben dem Text in seinem Container schweben.

Die Float-Eigenschaft kann auf einen der folgenden Werte gesetzt werden:

links - das Element schwebt auf die linke Seite seines Containers
rechts - das Element schwebt rechts von seinem Container
keine – Das Element schwebt nicht (wird dort angezeigt, wo es im Text erscheinen würde). Standardwert.
erben - ein Element erbt den Float-Wert seines übergeordneten Elements. In seiner einfachsten Form kann die Float-Eigenschaft verwendet werden, um den Effekt von Text zu erzeugen, der ein Bild umgibt (in einer Zeitung).

Float: links|rechts; kann Zeilen automatisch anordnen und umbrechen, erfordert aber Clear, um den Float zu löschen; Anzeige: Inline-Block kann Float manchmal ersetzen, um denselben Effekt zu erzielen.

Position: absolut|relativ; Zur Koordination mit oben, links und anderen Positionen;

verwenden:

position: absolute bewirkt, dass das Element außerhalb des Dokumentflusses liegt. Das positionierte Element nimmt keine Position im Dokument ein und wird auf einer anderen Ebene dargestellt. Der Z-Index kann eingestellt werden. Der Ebeneneffekt von PS ist Position: absolut.
Float führt auch dazu, dass das Element den Dokumentfluss verlässt, aber immer noch eine Position im Dokument oder Container einnimmt, wodurch der Dokumentfluss und andere Float-Elemente nach links oder rechts gedrängt werden und Zeilenumbrüche verursacht werden können. Der Textumbruch-Layouteffekt des Bildes ist „schwebend“.
Der Inline-Block der Anzeige verlässt den Dokumentfluss nicht und das Blockelement wird als großes Zeichen in den Dokumentfluss eingebettet, ähnlich dem Standardeffekt von img oder input.

Der Unterschied zwischen CSS-Layout-Float und Positionierungsattributen

CSS verfügt über drei grundlegende Positionierungsmechanismen: Normalfluss, schwebende und absolute Positionierung. 1. Normalfluss Die Position des Elementfelds im Normalfluss wird durch die Position des Elements in XHTML bestimmt. Elemente auf Blockebene werden von oben nach unten angeordnet und der vertikale Abstand zwischen den Boxen wird anhand des vertikalen Rands der Box berechnet. Inline-Elemente werden horizontal in einer Reihe angeordnet. Der normale Fluss besteht aus den Elementen im HTML-Dokument, z. B. Elementen auf Blockebene und Inline-Elementen, entsprechend ihren Anzeigeattributen im Dokument.

Position:relative ist die relative Positionierung von untergeordneten Blockebenenelementen zum übergeordneten Element. Die Positionierungsschlüsselwörter verwenden links/rechts/oben/unten. Geschwisterblockelemente werden relativ zueinander positioniert, nach der Verschiebung bleibt die ursprüngliche Position jedoch erhalten. Und die nachfolgende Positionierung von Geschwisterblockelementen basiert auf der Position vor dem Verschieben.

float:right/left ist die Positionierung des Elementflusses auf Unterblockebene in Richtung des übergeordneten Elements, und die für die Positionierung verwendeten Schlüsselwörter sind margin/padding. Die relative Positionierung zwischen Geschwisterblockelementen wird basierend auf der neuen Position nach dem Verschieben neu gerendert. Sie können sich überlappen und die ursprüngliche Position wird gelöscht.

Der größte Unterschied zwischen beiden besteht in der Positionsbeibehaltung.

Dieser Unterschied wird ausgenutzt, um mithilfe von CSS-Code ein Schiebetürmenü zu erstellen.

123WORDPRESS.COM Editor hinzugefügt

Im Allgemeinen wird Float für das Seitenlayout verwendet, aber Sie müssen darauf achten, Float zu löschen. Einige Spezialeffekte verwenden im Allgemeinen Position. Elemente, die Position verwenden, können überall auf der Seite erscheinen, was für einige Eingabeaufforderungsfelder, Spezialeffekte usw. praktisch ist.

Insbesondere können Sie auf der angezeigten Seite F12 drücken und sie langsam studieren, Sie werden viel Spaß daran haben.