Welche verschiedenen Möglichkeiten gibt es, Floats in CSS3 zu löschen?

Methode: 1. Legen Sie den „clear:both“-Stil in einem leeren div-Tag fest, um den Float zu löschen. 2. Fügen Sie ein „:after“-Pseudoelement zum übergeordneten Element hinzu und löschen Sie den Float, indem Sie den Float des Pseudos löschen -element; 3. Stellen Sie den Überlaufstil auf das übergeordnete Element ein, und der Float kann gelöscht werden, auch wenn der Attributwert nicht sichtbar ist.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Welche Möglichkeiten gibt es, Float in CSS3 zu löschen?

Float (Float) kann die Floating-Box so steuern, dass sie sich nach links und rechts bewegt, bis sie auf eine andere Floating-Box oder die umschließende Box an ihrer Außenkante trifft. Das schwebende Feld gehört nicht zum normalen Fluss im Dokumentfluss. Wenn das Element schwebend ist, wirkt es sich nicht auf das Layout von Elementen auf Blockebene aus, sondern nur auf das Layout von Inline-Elementen.

Zu diesem Zeitpunkt zeigt der normale Fluss im Dokumentenfluss, dass das schwebende Feld nicht denselben Layoutmodus hat. Wenn die Höhe der enthaltenden Box kleiner als die der schwebenden Box ist, kommt es zu einer „Höhenreduzierung“:

Die Höhe des übergeordneten Elements im Bild oben ist der Effekt der Auffüllung, und für das übergeordnete Element ist keine Höhe festgelegt .

Wenn die Höhe des übergeordneten Elements nicht festgelegt ist:

Wenn das untergeordnete Element im übergeordneten Element nicht auf Float eingestellt ist, wird die Höhe des übergeordneten Elements automatisch erweitert und der Höhenwert wird angezeigt Das untergeordnete Element im übergeordneten Element ist nicht auf Float festgelegt. Wenn das Element auf Float festgelegt ist, wird die Höhe des übergeordneten Elements nicht automatisch erweitert und es wird kein Höhenwert angezeigt.

Offensichtlich gibt es einige Probleme, nachdem der Float auf diese Weise eingestellt wurde, wie zum Beispiel:

Der Rand des übergeordneten Elements ist betroffen und kann nicht nach oben, unten, links und rechts zentriert werden.

Wenn die Höhe des Wenn das übergeordnete Element nicht festgelegt ist, wird die Höhe des übergeordneten Elements nach dem Schweben nicht gedehnt. Dann wird das übergeordnete Element nicht auf dem Display angezeigt.

Fügen Sie ein leeres div-Tag in den Code ein und setzen Sie dann „clear:both“ auf dieses Tag, um die Auswirkungen von Floats auf der Seite zu löschen. Seine Vorteile sind Einfachheit, Bequemlichkeit und gute Kompatibilität, aber es wird im Allgemeinen nicht empfohlen, diese Methode zu verwenden, da sie strukturelle Verwirrung verursacht und einer späteren Wartung nicht förderlich ist

<div style="clear: both"></div>

Das übergeordnete Element fügt ein :after-Pseudoelement hinzu. Durch das Löschen des Floatings des Pseudoelements wird der Zweck der Unterstützung der Höhe des übergeordneten Elements erreicht

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    }

Wenn Sie den Überlaufstil für das übergeordnete Element festlegen, können Sie den Float löschen, unabhängig davon, ob er overflow:hidden oder overflow:auto ist. Sein Wesen besteht darin, einen BFC zu erstellen, der den unterstützenden Effekt erzielt die Höhe des übergeordneten Elements

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

(Lernvideo-Sharing:

)

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