Welche Probleme verursacht CSS-Floating?

Die Auswirkungen von CSS-Floating: 1. Da sich das Floating-Element außerhalb des Dokumentflusses befindet, kann die Höhe des übergeordneten Elements nicht erweitert werden. Dies wirkt sich auf Elemente auf derselben Ebene wie das übergeordnete Element aus nicht gesetzt ist, wird das übergeordnete Element nicht auf dem Display angezeigt. 2. Das schwebende Element nimmt nicht mehr die Position des ursprünglichen Dokumentflusses ein und wirkt sich auf das Layout nachfolgender Elemente aus.

Die Betriebsumgebung dieses Artikels: Windows 7-System, CSS3-Version, Dell G3-Computer.

Empfohlen: CSS-Video-Tutorial

Wir müssen wissen: Die schwebende Box kann sich nach links und rechts bewegen, bis sie an ihrer Außenkante auf eine andere schwebende Box oder die enthaltende 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 Dokumentenfluss, dass das schwebende Feld nicht denselben Layoutmodus hat. Wenn die Höhe der enthaltenden Box kleiner als die der schwebenden Box ist, wird „Height Collapse“ angezeigt.

Wenn das übergeordnete Element keine Höhe festlegt und das untergeordnete Element im übergeordneten Element auf Float eingestellt ist, wird die Höhe des übergeordneten Elements nicht automatisch erweitert und es gibt keinen Höhenwert.

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

• Der Rand des übergeordneten Elements ist betroffen und es ist unmöglich, eine Zentrierung oben, unten, links und rechts zu erreichen

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

Zusammenfassung: Folgen durch Floating

(1) Da sich das Floating-Element außerhalb des Dokumentflusses befindet, kann die Höhe des übergeordneten Elements nicht erweitert werden, was Auswirkungen auf Elemente auf derselben Ebene wie das übergeordnete Element hat Das übergeordnete Element ist nicht angegeben. Stellen Sie die Höhe so ein, dass das übergeordnete Element nicht auf dem Display angezeigt wird.

(2) Nicht schwebende Elemente auf derselben Ebene wie das schwebende Element folgen ihm, da das schwebende Element den Dokumentenfluss verlässt und nicht seine ursprüngliche Position einnimmt

(3) Wenn das schwebende Element nicht das erste schwebende Element ist Element, das Element davor Die Elemente müssen ebenfalls schweben, da dies sonst leicht die strukturelle Anzeige der Seite beeinträchtigen kann

Da das schwebende Element nicht mehr die Position des ursprünglichen Dokumentflusses einnimmt, hat es Auswirkungen auf das Layout Um diese Probleme zu lösen, müssen Sie dieses Element hinzufügen.

Wie lösche ich das Schweben? Löschen Sie den schwebenden Prozess

1. Stellen Sie zunächst die CSS-Höhe des übergeordneten Elements ein, um es zu löschen. Im Allgemeinen legen wir die Höhe des Inhalts auf 100 Pixel und die oberen und unteren Felder auf 2 Pixel fest. Die Gesamthöhe des übergeordneten Elements beträgt 102 Pixel. Wir verwenden den Höhenstil, müssen aber zuerst die Höhe des Inhalts berechnen.

2. Verwenden Sie das Attribut „clear:both“, um den Float zu löschen. Wir können einen class="clear-Stil in das Div einfügen, um den Float zu löschen.

3. Definieren Sie die Attribute des übergeordneten Div. Wir verwenden das übergeordnete CSS-Define ein overflow:hidden-Stil im Selektor, um den vom übergeordneten Element generierten Float zu löschen.

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung!

Das obige ist der detaillierte Inhalt vonWelche Probleme verursacht CSS-Floating?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!