Was sind die Float-Attribute?

Zu den Float-Attributen gehören „Left“, „Right“, „None“, „Inherit“ usw. Detaillierte Einführung: 1. links, das Element schwebt nach links. Wenn es auf links eingestellt ist, bricht das Element aus dem normalen Dokumentfluss aus, schwebt nach links und ermöglicht die Anzeige anderer Elemente auf seiner rechten Seite , das Element schwebt nach rechts und links. Wenn es auf „rechts“ gesetzt ist, bricht das Element aus dem normalen Dokumentfluss aus, schwebt nach rechts und ermöglicht die Anzeige anderer Elemente auf seiner linken Seite. 3. none, das Das Element wird nicht schweben, und wenn es auf „Keine“ gesetzt ist, kehrt das Element in den Normalzustand zurück usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Das Float-Attribut (Float) ist eines der am häufigsten verwendeten Attribute in CSS und dient zur Steuerung der Floating-Position von Elementen auf der Seite. Durch Festlegen der Float-Eigenschaft des Elements können Sie das Element aus dem Dokumentfluss nehmen und frei auf der Seite positionieren. In diesem Artikel werden die verschiedenen Werte des Float-Attributs und ihre Verwendung vorgestellt.

Das Float-Attribut hat die folgenden Werte:

1 left: Das Element schwebt nach links. Bei der Einstellung „Links“ bricht das Element aus dem normalen Dokumentfluss aus, verschiebt sich nach links und ermöglicht die Anzeige anderer Elemente rechts davon. Wenn die Seite nicht breit genug ist, um das schwebende Element aufzunehmen, wird sie automatisch umbrochen.

2. rechts: Das Element schwebt nach rechts. Ähnlich wie bei „links“ bricht das Element bei der Einstellung „rechts“ aus dem normalen Dokumentfluss aus, verschiebt sich nach rechts und ermöglicht die Anzeige anderer Elemente links davon. Wenn die Seite nicht breit genug ist, um das schwebende Element aufzunehmen, wird sie automatisch umbrochen.

3. keine: Das Element schwimmt nicht. Wenn es auf „Keine“ gesetzt ist, kehrt das Element zum normalen Dokumentflusslayout zurück und wird nicht verschoben. Es ist der Standardwert.

4. erben: Erben Sie das Floating-Attribut des übergeordneten Elements. Wenn es auf „Erben“ eingestellt ist, erbt das Element das Float-Attribut des übergeordneten Elements. Wenn das übergeordnete Element das Float-Attribut nicht festlegt, ist es dasselbe wie „none“.

Layoutfunktionen von schwebenden Elementen:

- Schwebende Elemente werden automatisch auf die Breite ihres Inhalts verkleinert und nehmen nicht die gesamte Breite des übergeordneten Elements ein.

- Schwebte Elemente werden so nah wie möglich an der linken oder rechten Seite ihres Containers positioniert, neben anderen schwebenden Elementen.

- Wenn die Breite des schwebenden Elements die Breite des übergeordneten Elements überschreitet, wird es automatisch umbrochen.

– Schwebende Elemente unterbrechen den normalen Dokumentenfluss, sodass nachfolgende nicht schwebende Elemente den leeren Raum füllen, der durch das schwebende Element hinterlassen wird.

Anwendungsszenarien für schwebende Elemente:

1. Mehrspaltiges Layout implementieren: Durch Festlegen mehrerer Elemente als schwebende Elemente können Sie ein mehrspaltiges Layout erreichen. Wenn Sie beispielsweise mehrere div-Elemente auf float: left setzen, können Sie sie horizontal in einer Reihe anordnen.

2. Umgebender Effekt von Bildern und Text: Indem Sie das Bild als schwebendes Element festlegen, können Sie den Effekt erzielen, dass Text das Bild umgibt.

3. Navigationsmenü: Indem Sie die Listenelemente des Navigationsmenüs als schwebende Elemente festlegen, können Sie ein horizontal angeordnetes Navigationsmenü erreichen.

4. Responsives Layout: Beim Responsive Design kann durch Festlegen des Floating-Attributs unter verschiedenen Bildschirmgrößen das adaptive Layout der Seite auf verschiedenen Geräten erreicht werden.

Es ist zu beachten, dass schwebende Elemente dazu führen können, dass die Höhe des übergeordneten Elements zusammenbricht, d. h. das übergeordnete Element kann nicht automatisch erweitert werden, um das schwebende Element aufzunehmen. Um dieses Problem zu lösen, können Sie dem übergeordneten Element eine Clearfix-Klasse hinzufügen oder andere Methoden zum Löschen von Floats verwenden.

Zusammenfassung:

Das Float-Attribut ist ein häufig verwendetes Layout-Attribut in CSS. Durch Festlegen des Float-Attributs können Sie eine freie Positionierung von Elementen und mehrspaltige Layouteffekte erzielen. Seine Werte sind links, rechts, keine und erben, was bedeutet, dass er nach links gleitet, nach rechts gleitet, nicht gleitet und das Gleitattribut des übergeordneten Elements erbt. Mit schwebenden Elementen können verschiedene Layouteffekte erzielt werden. Sie müssen jedoch auf das Problem achten, das dazu führen kann, dass die Höhe des übergeordneten Elements zusammenbricht.

Das obige ist der detaillierte Inhalt vonWas sind die Float-Attribute?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!