Diese Frage hat hier bereits eine Antwort:

Welche Clearfix-Methoden kann ich verwenden? 28 Antworten

Obwohl Elemente mögen<div>s wachsen normalerweise mit derfloat Eigenschaft kann für CSS-Neulinge ein verblüffendes Problem verursachen:Wenn schwebende Elemente nicht schwebende übergeordnete Elemente haben, wird das übergeordnete Element ausgeblendet.

Zum Beispiel:

  <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

Das übergeordnete div in diesem Beispiel wirdnicht erweitern seine schwimmenden Kinder zu enthalten - es scheint zu habenheight: 0.

Wie lösen Sie dieses Problem?

Ich möchte hier eine vollständige Liste von Lösungen erstellen. Wenn Sie Probleme mit der browserübergreifenden Kompatibilität haben, weisen Sie Sie darauf hin.

Lösung 1

Schwebe den Elternteil.

  <div style="float: left;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

Vorteile: Semantischer Code.
Nachteile: Möglicherweise möchten Sie nicht immer, dass das übergeordnete Element als Gleitkomma fungiert. Schweben Sie, auch wenn Sie dies tun, mit den Eltern, und so weiter? Müssen Sie jedes Vorfahrenelement schweben lassen?

Lösung 2

Geben Sie dem übergeordneten Element eine explizite Höhe.

    <div style="height: 300px;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

Vorteile: Semantischer Code.
Nachteile: Nicht flexibel - Wenn sich der Inhalt ändert oder die Größe des Browsers geändert wird, wird das Layout beschädigt.

Lösung 3

Fügen Sie ein "spacer" -Element wie folgt in das übergeordnete Element ein:

    <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
        <div class="spacer" style="clear: both;"></div>
    </div>

Vorteile: Einfach zu codieren.
Nachteile: Nicht semantisch; das spacer div existiert nur als layout hack.

Lösung 4

Setze Eltern aufoverflow: auto.

   <div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

Vorteile: Benötigt keine zusätzliche div.
Nachteile: Scheint wie ein Hack - das ist nicht deroverflow der angegebene Zweck des Eigentums.

Bemerkungen? Andere Vorschläge?