Welche Möglichkeiten gibt es, Floats zu beseitigen?

Zu den Möglichkeiten zum Löschen von Floats gehören die Verwendung des Clear-Attributs, die Verwendung des Overflow-Attributs, die Verwendung von BFC, die Verwendung von Flex-Layout, die Verwendung von Grid-Layout und die Verwendung von Pseudoelementen zum Löschen von Floats. Detaillierte Einführung: 1. Dies ist die am häufigsten verwendete Methode zum Löschen von Floats. Fügen Sie ein Element nach dem Floating-Element hinzu und legen Sie das Clear-Attribut dafür fest, um zu verhindern, dass es zusammen mit dem vorherigen Floating-Element schwebt klare Attribute. Werte: links, rechts, beide und keine 2. Überlauf usw. verwenden.

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

In CSS gibt es folgende Hauptmethoden zum Löschen von Floats:

1. Verwenden Sie das Attribut „clear“:

Dies ist die am häufigsten verwendete Methode zum Löschen von Floats. Fügen Sie nach dem schwebenden Element ein Element hinzu und legen Sie die Eigenschaft „clear“ fest, um zu verhindern, dass es mit dem zuvor schwebenden Element schwebt. Das Attribut „clear“ hat vier Werte: links, rechts, beide und keiner. Die linken und rechten Werte werden verwendet, um die Floats auf der linken bzw. rechten Seite zu löschen, der Wert „Beide“ wird verwendet, um die Floats auf beiden Seiten zu löschen, und der Wert „keine“ bedeutet, dass kein Löschen durchgeführt wird. Zum Beispiel:

<div style="float:left;">浮动的元素</div>  <div style="clear:both;"></div>

2. Verwenden Sie das Überlaufattribut:

Durch Festlegen des Überlaufattributs für das übergeordnete Element können Sie dafür sorgen, dass die Höhe des übergeordneten Elements automatisch erweitert wird, um die schwebenden untergeordneten Elemente einzuschließen. Diese Methode wird häufig zusammen mit der Clearfix-Technik verwendet. Zum Beispiel:

.clearfix::after {content: "";display: table;clear: both;}

3. Verwenden Sie BFC (Block Formatting Context):

BFC ist ein Rendering-Mechanismus, der bestimmt, wie ein Element seinen Inhalt positioniert, sowie seine Beziehung und Interaktion mit anderen Elementen. BFC kann durch Festlegen der folgenden CSS-Eigenschaften aktiviert werden:

• overflow: jeder Wert außer auto und scroll (z. B. overflow:hidden).
• Deckkraft: ein anderer Wert als 0.
• transform: ein anderer Wert als none.
• wird sich ändern: beliebiger Wert.
• -webkit-overflow-scrolling: jeder andere Wert als Berührung.
• display: jeder andere Wert als flow-root.
• new-box: Beim Erstellen einer neuen Box (z. B. mit Flexbox oder Rasterlayout).

4. Flex-Layout verwenden:

Flex-Layout ist eine moderne CSS-Layoutmethode, die die Ausrichtung, Richtung und Reihenfolge von Elementen automatisch verwaltet. Im Flex-Layout werden schwebende Elemente ohne zusätzliche Vorgänge automatisch gelöscht. Zum Beispiel:

.container {display: flex;}

5. Rasterlayout verwenden:

Gridlayout ist ebenfalls eine moderne CSS-Layoutmethode, die die Erstellung komplexer zweidimensionaler Layouts ermöglicht. Im Rasterlayout werden schwebende Elemente ohne zusätzliche Vorgänge automatisch gelöscht. Zum Beispiel:

.container {display: grid;}

6. Float mit Pseudoelement löschen:

Dies ist ein gängiger Trick, um Float zu löschen, indem die Clear-Eigenschaft auf das Pseudoelement des übergeordneten Elements gesetzt wird. Zum Beispiel:

.parent::after {content: "";display: table;clear: both;}

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Floats zu beseitigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!