Was bedeutet CSS-Float? Warum muss CSS Floats löschen?

In CSS realisieren wir das Floating von Elementen durch das Float-Attribut. (Weitere Informationen zum Float-Attribut finden Sie im CSS-Handbuch)

Die Bedeutung des oben Gesagten scheint zu kommen und zu gehen, also lassen Sie es uns unten in Laienbegriffen erklären.

Sie müssen wissen, dass einige Elemente in CSS Elemente auf Blockebene sind und automatisch eine neue Zeile aktivieren (Referenzartikel zu Elementen auf Blockebene: Was ist die Definition von CSS-Elementen auf Blockebene? Was sind die CSS-Elemente auf Blockebene? Sind die CSS-Elemente Inline? CSS-Elemente auf Blockebene Der Unterschied zu Inline-Elementen ); aber manchmal müssen wir diese Layoutmethode ändern, was die Verwendung von CSS-Floating erfordert. CSS-Floats ermöglichen es einem bestimmten Element, sich an die Seite seiner Zeile zu bewegen und anderen Inhalten den Abwärtsfluss zu ermöglichen. Ein rechts schwebendes Element wird auf die rechte Seite seines Containers geschoben, und der Inhalt fließt auf der linken Seite nach unten. Ein Element mit einem schwebenden Element wird auf die linke Seite geschoben, und sein Inhalt fließt auf der rechten Seite nach unten.

Nachdem wir die Bedeutung von CSS-Floating gelesen haben, werfen wir einen Blick darauf, warum CSS Floating löschen muss.

Nach der obigen Erklärung, was CSS-Float bedeutet, wissen wir, dass in einigen Fällen CSS-Float vorhanden sein muss. Warum sollten wir also den Float löschen?

Wir müssen wissen: Eine schwebende Box kann sich nach links und rechts bewegen, bis sie an ihrer Außenkante auf eine andere schwebende Box oder eine umschließende Box 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 Dokumentfluss, 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 einem „Höhenkollaps“. Zu diesem Zeitpunkt ist es notwendig, den Schwimmer zu reinigen.

Um es einfach auszudrücken:

Zum Beispiel: Wenn der Float nicht gelöscht wird, tritt das Problem der Div-Überlappung auf. Sie erstellen eine Webseite mit einem Kopfzeilenblock oben, zwei Spalten mit Inhaltsblöcken in der Mitte und einem Fußzeilenblock unten. Sie legen den linken Float im mittleren Inhaltsblock fest und die Höhen der beiden Blöcke sind inkonsistent. Wenn ein Block höher ist, muss der Float im Fußbereich gelöscht werden. Wenn der Float nicht gelöscht wird, überlappt sich der Footer-Block mit einem der Inhalte, z. B. Bild:

Verwandte Empfehlungen: