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

1. Dokumentenfluss und Floating

1. Was ist Dokumentenfluss?

In HTML kann der Dokumentfluss auch als Standardfluss oder normaler Fluss bezeichnet werden. Elemente werden von oben nach unten und von links nach rechts angezeigt. Blockebenenelemente belegen standardmäßig eine Zeile. Inline- oder Inline-Blockebenenelemente belegen nur den Inhaltsteil oder den Teil, den sie selbst belegen. Sie belegen eine Zeile nicht so dominant wie Blockebenenelemente. Tatsächlich ist dies dasselbe wie das natürliche Phänomen von Wasserfällen, die von oben nach unten fließen^_^.

2. Unruhiges Schweben

Wir haben oben bereits ein vorläufiges Verständnis des Dokumentflusses erlangt, aber die Anzeige von Elementen auf einer Webseite reicht nicht aus, wenn man sich nur auf den Dokumentfluss verlässt. Beispielsweise ist im Markennavigationsbereich von Tmall Mall jedes Listenelement li der ungeordneten Liste ul ein Blockelement (Anzeige: Listenelement). Gemäß dem Dokumentfluss belegen Blockelemente eine Zeile, sodass jedes li von oben nach unten angezeigt wird. Tatsächlich belegt jedoch jedes li nur seinen eigenen Teil, siehe folgende Abbildung:

Warum werden diese li-Elemente nicht entsprechend dem Dokumentfluss angezeigt? Der Grund dafür ist, dass sie vom Dokumentfluss getrennt wurden. Es gibt zwei Möglichkeiten, aus dem Dokumentfluss ein Element zu erstellen: Die erste ist das Schweben (Float); die zweite ist die Positionierung (Position).
Während Floating in anderen Familien das Kind ist, das auf seine Eltern hört und ein sehr braves und vernünftiges Kind ist, dann ist Floating in unserer eigenen Familie das Kind, das ungehorsam und unruhig ist. Genau wie als wir klein waren, sagten unsere Eltern oft zu uns: „Schau dir an, wie gehorsam die Kinder anderer Leute sind, und dann schau dir selbst an, wie …“

2. Floating ist ein zweischneidiges Schwert

Da das Element durch das Schweben aus dem Dokumentfluss genommen wurde, können wir die Anzeige des Elements flexibler gestalten, beispielsweise durch die Erstellung einer einfachen Navigationsleiste:

 Körper{
        Rand: 0;
        Hintergrundfarbe: #333;
    }
    ul{
        Listenstil: keiner;
        Breite: 500px;
        Rand: 100px automatisch 0;
        Polsterung: 0;
    }
    .clearfix:nach{
        Inhalt:"";
        Anzeige:Block;
        klar: beides;
    }
    ul li{
        schweben: links;
        Breite: 100px;
        Höhe: 30px;
        Hintergrundfarbe: #fff;
    }
    ul li a
        Anzeige:Block;
        Höhe: 100 %;
        Zeilenhöhe: 30px;
        Farbe: #000;
        Textdekoration: keine;
        Textausrichtung: zentriert;
    }

 <ul Klasse="nav Clearfix">
        <li>
            <a href="">Navigation 1</a>
        </li>
        <li>
            <a href="">Navigation 2</a>
        </li>
        <li>
            <a href="">Navigation 3</a>
        </li>
        <li>
            <a href="">Navigation 4</a>
        </li>
        <li>
            <a href="">Navigation 5</a>
        </li>
    </ul>

Ein weiteres Beispiel ist das Holy Grail-Layout von früher

   Körper{
        Rand: 0;
    }
    .wickeln{
        Polsterung: 0 300px;
    }
    .clearfix:nach{
        Inhalt:"";
        Anzeige:Block;
        klar: beides;
    }
    .Mitte,.links,.rechts{
        schweben: links;
        Position: relativ;
        Höhe: 100px;
    }
    .Mitte{
        Breite: 100 %;
        Hintergrundfarbe: #333;
    }
    .links{
        links: -300px;
        Breite: 300px;
        Rand links: -100 %;
        Hintergrundfarbe:#ccc;
    }
    .Rechts{
        rechts: -300px;
        Breite: 300px;
        Rand links: -300px;
        Hintergrundfarbe: #f00;
    }

  <div Klasse="Wrap Clearfix">
        <div Klasse="Mitte"></div>
        <div Klasse="links"></div>
        <div Klasse="rechts"></div>
    </div>

Gleichzeitig bringt das Schweben auch andere Effekte mit sich. Beispielsweise verdecken die schwebenden Elemente die Elemente im dahinter liegenden Dokumentfluss.

  Körper{
        Rand: 0;
    }
    .box-1{
        schweben: links;
        Breite: 200px;
        Höhe: 200px;
        Hintergrundfarbe: #333;
    }
    .box-2{
        Breite: 200px;
        Höhe: 300px;
        Hintergrundfarbe:#ccc;
    }

 <div Klasse="Box-1"></div>
    <div Klasse="Box-2"></div>

Um das obige Problem zu lösen, müssen wir nur den Float von BOX-2 löschen.

  .box-2{
        klar: beides;
        Breite: 200px;
        Höhe: 300px;
        Hintergrundfarbe:#ccc;
    }

Darüber hinaus führen schwebende Elemente dazu, dass die Höhe des übergeordneten Elements reduziert wird. Wenn ein untergeordnetes Element eines Blockebenenelements ohne Höhe schwebt, beträgt die Höhe des übergeordneten Blockebenenelements 0. Siehe den folgenden Code:

   Körper{
        Rand: 0;
    }
    .box-1{
        Breite: 300px;
        Hintergrundfarbe: #333;
    }
    .box-2{
        schweben: links;
        Breite: 200px;
        Höhe: 300px;
        Hintergrundfarbe:#ccc;
    }

  <div Klasse="Box-1">
        <div Klasse="Box-2"></div>
    </div> 

Sie sollten wissen, dass die Höhe eines Elements, wenn ihm keine feste Höhe zugewiesen ist, durch den Inhalt erweitert wird. Das heißt, wenn dieses Element keinen Inhalt hat, ist seine Höhe 0. Wenn dieses Element Inhalt hat, hat es eine Höhe (das heißt, die Höhe des Inhalts). Bitte sehen Sie sich die folgende Abbildung an:

 .box-1{
        Breite: 100px;
        Hintergrundfarbe: #f00;
    }

<div Klasse="Box-1"></div> 

<div class="box-1">Ich bin der Inhalt</div> 

Obwohl in der obigen Abbildung das übergeordnete Element BOX-1 ein untergeordnetes Element BOX-2 hat, beträgt seine Höhe 0. Was ist hier los? Da BOX-2 nach oben schwebt, befinden sich das untergeordnete Element BOX-2 und das übergeordnete Element BOX-1 nicht auf derselben Höhe, sodass BOX-1 BOX-2 nicht umschließen kann. Bitte beachten Sie die folgende Abbildung:

Das obige Bild zeigt das Problem des Höhenabfalls des übergeordneten Elements, der durch schwebende Elemente verursacht wird.

3. So lösen Sie das durch Floating verursachte Problem des Höhenkollapses des übergeordneten Elements

1. Untergeordnete Methode

Fügen Sie am Ende der untergeordneten Elemente ein untergeordnetes Element mit einer Höhe von 0 hinzu und löschen Sie das Schweben. Bitte sehen Sie sich den Code an:

   Körper{
        Rand: 0;
    }
    .box-1{
        Breite: 300px;
        Hintergrundfarbe: #f00;
    }
    .box-2{
        schweben: links; 
        Breite: 200px;
        Höhe: 150px;
        Hintergrundfarbe: #ff0;
    }
    .box-3{
        klar: beides;
    }

<div Klasse="Box-1">
        <div Klasse="Box-2"></div>
        <div Klasse="box-3"></div>
    </div>

Das Wirkungsdiagramm sieht wie folgt aus. Die rote Box ist das übergeordnete Element und die gelbe Box ist das untergeordnete Element BOX-2.

2. Übergeordnete Methode

Setzen Sie display:inline-block auf das übergeordnete Element.
Der Code lautet wie folgt:

  Körper{
        Rand: 0;
    }
    .box-1{
        Anzeige: Inline-Block;
        Breite: 300px;
        Hintergrundfarbe: #f00;
    }
    .box-2{
        schweben: links; 
        Breite: 200px;
        Höhe: 150px;
        Hintergrundfarbe: #ff0;
    }

 <div Klasse="Box-1">
        <div Klasse="Box-2"></div>
    </div>

Setzen Sie overflow:hidden auf das übergeordnete Element.
Der Code lautet wie folgt:

   Körper{
        Rand: 0;
    }
    .box-1{
        Überlauf: versteckt;
        Breite: 300px;
        Hintergrundfarbe: #f00;
    }
    .box-2{
        schweben: links; 
        Breite: 200px;
        Höhe: 150px;
        Hintergrundfarbe: #ff0;
    }

  <div Klasse="Box-1">
        <div Klasse="Box-2"></div>
    </div>

Die beiden oben genannten Methoden basieren tatsächlich auf BFC (Blockformatierungskontext). Da BFC dem übergeordneten Element ermöglicht, schwebende untergeordnete Elemente zu enthalten, wodurch das Problem des Höhenkollapses des übergeordneten Elements gelöst wird, ist es in Ordnung, solange BFC ausgelöst werden kann.

Es gibt nicht viel darüber zu sagen, dem übergeordneten Element eine feste Höhe zuzuweisen. Daher werde ich nicht ins Detail gehen, da die Höhe bei der tatsächlichen Entwicklung im Allgemeinen durch den Inhalt unterstützt wird.

Verwenden Sie das Pseudoelement: danach und löschen Sie den Float. Bitte beachten Sie den folgenden Code:

  Körper{
        Rand: 0;
    }
    .clearfix{
        Breite: 300px;
        Hintergrundfarbe: #f00;
    }
    .clearfix:nach{
        Inhalt:"";
        Anzeige:Block;
        klar: beides;
    }
    .Kasten{
        schweben: links; 
        Breite: 200px;
        Höhe: 150px;
        Hintergrundfarbe: #ff0;
    }

 <div Klasse="clearfix">
        <div Klasse="Box"></div>
    </div>

4. Schluss

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