Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

Wird auch als Standardpositionierung des Dokumentflusses bezeichnet.

1. Jedes Element hat seinen eigenen Platz auf der Seite

2. Jedes Element wird aus der oberen linken Ecke des übergeordneten Elements gerendert (angezeigt)

3. Elemente auf Blockebene werden einzeln von oben nach unten angeordnet, und jedes Element befindet sich in einer separaten Zeile

4. Inline-Elemente sind mehrere Elemente, die in einer Zeile angezeigt, von links nach rechts angeordnet und ohne Zeilenumbrüche angezeigt werden

②Schwebende Positionierung

Elemente auf Blockebene horizontal anzeigen lassen

schweben:

Wert: left Nachdem das Element schwebend ist, wird es links vom übergeordneten Element in der aktuellen Zeile oder neben dem schwebenden Element auf der linken Seite angedockt

Nachdem das Element schwebend ist, wird es rechts neben dem übergeordneten Element in der aktuellen Zeile oder neben dem schwebenden Element rechts angedockt.

kein Standardwert, kein Float

Schwimmeigenschaften

1. Sobald ein Element schwebt, befindet es sich außerhalb des Dokumentflusses (es belegt keinen Seitenplatz und die folgenden nicht schwebenden Elemente bewegen sich nach vorne, um die Position einzunehmen).

2. Das schwebende Element wird an der linken/rechten Seite des übergeordneten Elements in der aktuellen Zeile oder am Rand anderer schwebender Elemente angedockt.

3. Wenn das übergeordnete Element nicht alle schwebenden Elemente horizontal anzeigen kann, wird das letzte, das nicht angezeigt werden kann, automatisch umbrochen

4. Floating wird verwendet, um das Problem zu lösen, dass mehrere Elemente auf Blockebene in derselben Zeile angezeigt werden

③Besondere Situationen durch schwebende Positionierung

1. Das Problem der Platzierung schwebender Elemente

Wenn das Element nicht alle schwebenden Elemente anzeigen kann, wird das letzte Element, das nicht angezeigt werden kann, umbrochen

Allerdings nehmen schwebende Elemente Positionen entsprechend ihrer eigenen Schweberichtung ein.

Die nach unten verschobenen schwebenden Elemente müssen aus dem Weg geräumt und weiter unten angezeigt werden.

2. Wenn ein Element schwebt und keine definierte Breite hat, richtet sich die Breite des Elements nach dem Schweben nach dem Inhalt

3. Sobald ein Element schwebt, wird es zu einem Element auf Blockebene

Hier können Sie die Größe und die vertikalen Ränder festlegen

4. Text- und Inline-Elemente werden nicht von schwebenden Elementen untergedrückt. Stattdessen wird es geschickt vermieden und um das schwebende Element herum angezeigt.

In der Vergangenheit haben wir die Schwebefunktion häufig verwendet, um den Effekt zu erzeugen, als würde Text um Bilder herumfließen.

Schreiben wir eine kleine Demo:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Schwebendes Element-Xiaoling</title>
    <Stil>
      .box,.box1{ Breite:100%; Höhe:200px;}
      .box{margin-bottom: 201px;}
      .box3{ Breite: 800px; Höhe: 50px;}
      .item{float: links; }
      .box .item{ Breite:500px;Höhe: 100%;}
      .box1 .item{ Höhe: 100%;}
      .red{Hintergrund: rot;}
      .green{Hintergrund: grün;}
      .pink{Hintergrund: pink;}
      .schwarz{Hintergrund:#ddd;}
      .block{ Breite:100px;Höhe:100px;Hintergrund: #ddd;float: rechts;}
    </Stil>
</Kopf>
<Text>
    <h3>Blockbreite festlegen</h3>
    <div Klasse="Box">
        <div Klasse = "item red">abcdefghigklmn</div>
        <div Klasse="Artikel grün">abcdefghi</div>
        <span class="item pink">abcdefghi</span>
        <div Klasse = "Artikel schwarz">abc</div>
    </div>
    <h3>Block ohne festgelegte Breite</h3>
    <div Klasse="Box1">
        <div Klasse = "item red">abcdefghigklmn</div>
        <div Klasse="Artikel grün">abcdefghi</div>
        <span class="item pink">abcdefghi</span>
        <div Klasse = "Artikel schwarz">abc</div>
    </div>
    <h3>Text wird um schwebende Elemente herum umbrochen</h3>
    <div Klasse="Box3">
        <div Klasse="Block"></div>
        <span>1. Das offensichtlichste Zeichen eines großen Mannes ist sein starker Wille. Egal wie sich die Umgebung ändert, seine ursprüngliche Absicht und Hoffnung wird sich nicht im Geringsten ändern, und er wird schließlich Hindernisse überwinden und seine gewünschten Ziele erreichen.
            2. Lassen Sie sich nicht von den Augen anderer täuschen. Es ist dumm, die Gedanken anderer Menschen anhand des eigenen Herzens zu erraten. Wenn Sie sich nur in der Kontrolle Ihrer eigenen Gefühle sicher sind, versuchen Sie, jeden Tag gute Laune zu bewahren!
            3. Die Fähigkeit der Menschen, sich in Notsituationen an die Umgebung anzupassen, ist wirklich erstaunlich. Menschen können Unglück ertragen, weil sie über erstaunliches Potenzial und Ausdauer verfügen. Solange sie entschlossen sind, dieses Potenzial zu nutzen, werden sie in der Lage sein, Schwierigkeiten zu überwinden.
            4. Was dich müde macht, ist nicht der Berg vor dir, sondern das Sandkorn in deinem Schuh. Das Leben ist ein Abenteuer. In jeder stürmischen Nacht ist Ihr beharrlicher Glaube das Einzige, was Sie weitermachen lässt.
            5. Wenn Sie Ihr Eigentum verlieren, verlieren Sie nur wenig. Wenn Sie Ihre Ehre verlieren, verlieren Sie viel. Wenn Sie Ihren Mut verlieren, verlieren Sie alles.
      </span>
    </div>
</body>
</html>

④ Schwebekörper löschen

Löschen Sie die vorherigen schwebenden Elemente für sich

Nachdem das Element schwebend ist, befindet es sich außerhalb des Dokumentflusses und die nachfolgenden nicht schwebenden Elemente werden nach vorne verschoben, um die Position auszufüllen.

Wenn das nachfolgende Element die Position nicht ausfüllen möchte, müssen Sie für dieses Element ein klares Floating festlegen.

klar:

Wert: 1.left Lösche den Effekt des Linksschwebens auf mich

2.right Lösche den Effekt des Rechtsschwebens auf mich

3.beide beseitigen den Einfluss von links und rechts, der auf mich schwebt

4.none löscht die Auswirkungen nicht

⑤Hoher Zusammenbruch

Was ist ein hoher Einsturz?

1. Das übergeordnete Element ist nicht hoch und die Höhe wird vom untergeordneten Element unterstützt.

2. Alle untergeordneten Elemente sind schwebend

Dann befinden sich alle untergeordneten Elemente außerhalb des Dokumentflusses und das übergeordnete Element denkt, dass sich darin keine Elemente befinden.

Das übergeordnete Element hat also keine Höhe.

Siehe Bild

Lösung:

1. Das übergeordnete Element schwebt ebenfalls. Nachteil: Dies wirkt sich auf die nicht schwebenden Elemente hinter dem übergeordneten Element aus (die nicht schwebenden Elemente dahinter belegen den Dokumentfluss und füllen die Position der Elemente aus, die die vorherigen schwebenden Elemente belegen (außerhalb des Dokumentflusses)).

2. Der Nachteil beim direkten Schreiben der Höhe des übergeordneten Elements besteht darin, dass Sie die genaue Höhe möglicherweise nicht immer kennen (beispielsweise wissen Sie in der Liste einiger Produkte auf der Taobao-Website in der folgenden Abbildung nicht, wie viele Produkte es gibt, sodass auch die entsprechende Höhe des übergeordneten Elements unklar ist - dies ist nur ein Beispiel, um einige Situationen zu veranschaulichen, in denen wir die genaue Höhe des übergeordneten Elements nicht kennen. Es bedeutet nicht, dass Taobao für das Layout Floating verwendet ~)

3.Überlauf: Versteckte Nachteile verhindern die Anzeige des Überlaufs

4. Fügen Sie dem übergeordneten Element ein Blockelement hinzu. Dieses Blockelement hat keinen Inhalt und keine Höhe. Schreiben Sie einfach clear:both. Dadurch kann das übergeordnete Element die Höhe des Inhalts im Dokumentfluss ermitteln

(1) Das Hinzufügen eines übergeordneten Elements auf Blockebene direkt innerhalb des übergeordneten Elements führt zu: ① Der Code ist nicht schön. ② Er kann später vom Wartungspersonal versehentlich gelöscht werden (weil es denkt, es sei nutzloser Code).

(2) Das übergeordnete Element verwendet das Pseudoelement :after und löscht das schwebende

Endlich ist das Problem des Höheneinsturzes perfekt gelöst!

Referenzcode:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Lösung des Problems des Schwebens - Höheneinbruch des übergeordneten Elements</title>
    <Stil>
       .box1,.box2,.box3,.box4,.box5{width:400px;Hintergrund: grüngelb;}
       /* .box3{width: 500px;} */
       .box1{margin-bottom: 201px;}
       .item{ Breite:180px;Höhe:180px;}
       .mr{ Rand rechts: 30px;}
       .red{Hintergrund: rot;}
       .blau{Hintergrund:blau;}
       .green{Hintergrund: grün;}
       .pink{Hintergrundfarbe: pink;}
       .float-left{float:left}
       .item2,.item3{Breite:100%;Höhe:180px;}
       .box3{Überlauf: versteckt;}
       .clear{clear:both}
       .box5::nach{Anzeige: Block;Inhalt: '';Löschen: beides;}
    </Stil>
</Kopf>
<Text>
    <h3>Phänomen des Höhenkollapses beim übergeordneten Element</h3>
    <div Klasse="Box1">
        <div Klasse = "Element float-left mr red"></div>
        <div Klasse = "Element float-left blue"></div>
    </div>

    <h3>Lösung 1 zum Reduzieren der Höhe des übergeordneten Elements – übergeordnetes Element schwebt ebenfalls</h3>
    <div Klasse="Box2 float-left">
        <div Klasse = "Element float-left mr red"></div>
        <div Klasse = "Element float-left blue"></div>
    </div>
    <!--- Auswirkungen auf die folgenden nicht schwebenden Elemente: Nicht schwebende Elemente haben einen Dokumentfluss und füllen die Position der vorherigen schwebenden Elemente aus-->
    <!-- <div Klasse="item2 grün">1</div> 
    <div Klasse="item2 pink">2</div> -->

    <h3>Lösung 3 zum Reduzieren der Höhe des übergeordneten Elements – overflow:hidden</h3>
    <div Klasse="Box3">
        <div Klasse = "Element float-left mr red"></div>
        <div Klasse = "Element float-left blue"></div>
        <!-- <div class="item blue"></div> -->
        <!-- <span class="box3">sdcvsdcvsdvsdvsdfvsdvsvzsdfvasfvadav</span> -->
    </div>

    <h3>Lösung 4 zum Reduzieren der Höhe übergeordneter Elemente – Hinzufügen von Elementen auf Blockebene (1)</h3>
    <div Klasse="box4">
        <div Klasse = "Element float-left mr red"></div>
        <div Klasse = "Element float-left blue"></div>
        <div Klasse="klar"></div>
    </div>

    <h3>Lösung 4 zum Reduzieren der Höhe übergeordneter Elemente – Hinzufügen von Elementen auf Blockebene (2)</h3>
    <div Klasse="box5">
        <div Klasse = "Element float-left mr red"></div>
        <div Klasse = "Element float-left blue"></div>
    </div>
</body>
</html>

Damit ist dieser Artikel über mehrere CSS-Methoden zur Lösung des Problems abgeschlossen, dass Floating den Höhenabfall des übergeordneten Elements verursacht. Weitere verwandte Inhalte zum Thema Floating, das den Höhenabfall des übergeordneten Elements verursacht, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

In der Vergangenheit wurde Float häufig für das Layout verwendet, aber wir alle wissen, dass bei der Verwendung von Floating-Layout ein Problem auftritt, das dazu führt, dass die Höhe des übergeordneten Elements zusammenbricht

Dann lassen Sie uns gemeinsam die Lösung für dieses Problem erkunden! Beginnen wir mit dem Dokumentenfluss.

1. Klassifizierung der Positionierung

Normale Durchflusspositionierung
Schwebende Positionierung
Relative Positionierung
Absolute Positionierung

① Normale Durchflusspositionierung

<<: Fehlerbehebung bei der Ursache des 502 Bad Gateway-Fehlers auf dem Nginx-Server

>>: Verwenden Sie Vue, um den Effekt der Registrierungsseite zu realisieren. Vue ermöglicht die Anmeldung per SMS-Bestätigungscode.

Beispiel, wie nginx dynamische und statische Trennung implementiert

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

Beispiel, wie nginx dynamische und statische Trennung implementiert

Detaillierte Erläuterung mehrerer Möglichkeiten zum Schreiben privater Variablen der ES6-Implementierungsklasse

Einführung in die Verwendung und Deaktivierung von Transparent Huge Pages in Linux

Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)

Implementierung der CentOS8.0-Netzwerkkonfiguration

XHTML verwendet einige veraltete Elemente in HTML nicht mehr

So installieren Sie JDK 13 in einer Linux-Umgebung mithilfe eines komprimierten Pakets

So zeigen Sie Dateien im Docker-Image an

Implementierung einer verschiebbaren Komponente zum Teilen des linken und rechten Bedienfelds in Vue3

Beispielcode zur Implementierung eines reinen CSS-Popup-Menüs mit Transform

Artikel empfehlen

Lösung für den Fehler beim Aufruf von Yum im Docker-Container

So fügen Sie schnell 10 Millionen Datensätze in MySQL ein

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

MySQL implementiert eine Lösung ähnlich der Oracle-Sequenz

Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele

So konfigurieren Sie Nginx zur Unterstützung von IPv6 unter Linux

Installieren Sie Jenkins mit Docker und lösen Sie das Problem des anfänglichen Plugin-Installationsfehlers

So verwenden Sie Indizes zur Optimierung von MySQL ORDER BY-Anweisungen

Methode zum Erkennen, ob IP und Port verbindbar sind

Beispielcode mit Vue-Router in HTML

Interpretation und Analyse von HTTP-Header-Informationen (detaillierte Zusammenfassung)

Verkürzen Sie die Seiten-Rendering-Zeit, damit die Seite schneller läuft

JavaScript implementiert die Eingabeüberprüfung im Kennwortfeld

Redo-Dateiwartungsmethode der InnoDB-Engine

Detaillierte Erklärung der einfachen HTML- und CSS-Verwendung