Frage Wie verhindern Sie, dass Eltern von schwebenden Elementen zusammenbrechen? [Duplikat]


Diese Frage hat hier bereits eine Antwort:

Obwohl Elemente wie <div>s normalerweise wachsen, um ihren Inhalt zu passen, mit der float Eigenschaft kann für CSS-Anfänger ein überraschendes Problem verursachen: Wenn floated-Elemente nicht floatende übergeordnete Elemente enthalten, wird das übergeordnete Element minimiert.

Beispielsweise:

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

Das Eltern-Div in diesem Beispiel wird nicht erweitern um seine schwebenden Kinder zu enthalten - es scheint zu haben height: 0.

Wie löst man dieses Problem?

Ich möchte hier eine erschöpfende Liste von Lösungen erstellen. Wenn Sie Probleme mit der Kompatibilität mit Browsern haben, weisen Sie sie bitte 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>

Pros: Semantischer Code.
Nachteile: Möglicherweise möchten Sie nicht immer, dass das Elternteil schwebt. Selbst wenn Sie das tun, treiben Sie die Eltern der Eltern und so weiter? Mußt du jedes Vorfahrenelement schwimmen lassen?

Lösung 2

Gib dem Elternteil eine explizite Höhe.

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

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

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>

Pros: Einfach zu programmieren.
Nachteile: Nicht semantisch; Das Spacer-Div existiert nur als Layout-Hack.

Lösung 4

Setze Eltern auf overflow: auto.

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

Pros: Benötigt keine extra div.
Nachteile: Scheint wie ein Hack - das ist nicht der overflow Eigentumszweck.

Bemerkungen? Andere Vorschläge?


877


Ursprung


Antworten:


Lösung 1:

Die zuverlässigste und unauffälligste Methode scheint dies zu sein:

Demo: http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

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

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

Mit ein wenig CSS-Targeting müssen Sie dem Eltern nicht einmal eine Klasse hinzufügen DIV.

Diese Lösung ist abwärtskompatibel zu IE8, sodass Sie sich keine Sorgen machen müssen, dass ältere Browser ausfallen.

Lösung 2:

Eine Anpassung zu Lösung 1 wurde vorgeschlagen und lautet wie folgt:

Demo: http://jsfiddle.net/wXaEH/162/

HTML:

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

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

Diese Lösung scheint rückwärtskompatibel zu IE5.5 zu sein, ist jedoch nicht getestet.

Lösung 3:

Es ist auch möglich zu setzen display: inline-block; und width: 100%; ein normales Blockelement zu emulieren, während es nicht kollabiert.

Demo: http://jsfiddle.net/SO_AMK/ae5ey/

CSS:

.clearfix {
    display: inline-block;
    width: 100%;
}

Diese Lösung sollte abwärtskompatibel zu IE5.5 sein, wurde aber nur in IE6 getestet.


482



Ich benutze normalerweise die overflow: auto Trick; obwohl das streng genommen nicht der beabsichtigte Verwendungszweck für Überlauf ist ist irgendwie verwandt - genug, um es leicht zu erinnern, sicher. Die Bedeutung von float: left selbst wurde in diesem Beispiel, IMO, für verschiedene Zwecke mehr erweitert als Überlauf.


66



Das Problem tritt auf, wenn sich ein Floating-Element in einer Container-Box befindet. Dieses Element erzwingt nicht automatisch die Anpassung der Höhe des Containers an das Floated-Element. Wenn ein Element floated ist, enthält sein Elternelement es nicht länger, da das Float aus dem Fluss entfernt wird. Sie können 2 Methoden verwenden, um es zu beheben:

  • { clear: both; }
  • clearfix

Sobald Sie verstanden haben, was passiert, verwenden Sie die folgende Methode, um das Problem zu beheben.

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Demonstration :)


18



Anstatt zu setzen overflow:auto auf dem Elternteil, setzen overflow:hidden

Das erste CSS, das ich für jede Webseite schreibe, ist immer:

div {
  overflow:hidden;
}

Dann muss ich mir nie Sorgen machen.


17



Es gibt mehrere Versionen des Clearfix mit Nicolas Gallagher und Thierry Koblentz als Schlüsselautoren.

Wenn Sie Unterstützung für ältere Browser wünschen, verwenden Sie am besten diesen clipfix:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

In SCSS sollten Sie die folgende Technik verwenden:

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

Wenn Sie keine Unterstützung für ältere Browser benötigen, gibt es eine kürzere Version:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

12



Obwohl der Code nicht perfekt semantisch ist, denke ich, dass es einfacher ist, ein "clearing div" am unteren Ende jedes Containers mit Floats zu haben. Tatsächlich habe ich die folgende Stilregel in meinen Reset-Block für jedes Projekt eingefügt:

.clear 
{
   clear: both;
}

Wenn Sie für IE6 (Gott helfe Ihnen) stylen, sollten Sie dieser Regel auch eine 0px Zeilenhöhe und -höhe geben.


9



Die ideale Lösung wäre zu verwenden inline-block für die Spalten statt zu schweben. Ich denke, die Browser-Unterstützung ist ziemlich gut, wenn Sie folgen (a) bewerben inline-block nur zu Elementen, die normalerweise inline sind (z. B. span); und (b) hinzufügen -moz-inline-box für Firefox.

Überprüfen Sie Ihre Seite auch in FF2, da ich eine Menge Probleme beim Verschachteln bestimmter Elemente hatte (überraschenderweise ist dies der Fall, bei dem IE viel besser funktioniert als FF).


9



Seltsamerweise hat niemand eine vollständige Antwort dafür gefunden, ach, nun, hier ist es.

Lösung eins: Lösche beide

Hinzufügen eines Blockelements mit dem Stil clear: both; darauf werden die Floats über diesen Punkt hinaus gelöscht und das Elternelement dieses Elements daran gehindert zu kollabieren. http://jsfiddle.net/TVD2X/1/

Vorteile: Erlaubt das Löschen eines Elements und von Elementen, die Sie unten hinzufügen, wird nicht durch die floated-Elemente oben und das gültige css beeinflusst.

Nachteile: Erfordert das andere Tag, um die Floats zu löschen, aufgeblähtes Markup.

Hinweis: Um auf IE6 zurückzugreifen und damit auf abstinente Eltern (d. H. Das Eingabeelement) zu arbeiten, können Sie Folgendes nicht verwenden: after.

Lösung zwei: Anzeige: Tabelle

Hinzufügen von Anzeige: Tabelle; zu dem Elternteil, damit er die Schwimmer abschütteln und mit der richtigen Höhe anzeigen kann. http://jsfiddle.net/h9GAZ/1/

Vorteile: Kein extra Markup und viel besser. Funktioniert in IE6 +

Nachteile: Erfordert ungültige CSS, um sicherzustellen, dass alles gut in IE6 und 7 spielt.

Hinweis: Die IE6- und 7-Weiten-Auto-Funktion wird verwendet, um zu verhindern, dass die Breite 100% + Padding beträgt, was in neueren Browsern nicht der Fall ist.

Ein Hinweis auf die anderen "Lösungen"

Diese Fixes arbeiten mit dem niedrigsten unterstützten Browser über 1% global (IE6), was bedeutet: mit: after schneidet es nicht ab.

Overflow hidden zeigt zwar den Inhalt an, verhindert aber nicht das Zusammenklappen des Elements und beantwortet die Frage nicht. Die Verwendung eines Inline-Blocks kann fehlerhafte Ergebnisse haben, Kinder mit seltsamen Rändern und so weiter, die Tabelle ist viel besser.

Wenn Sie die Höhe festlegen, wird der Kollaps zwar "verhindert", aber es ist keine richtige Korrektur.

Ungültiges CSS

Invalid css hat noch niemandem geschadet, tatsächlich ist es jetzt die Norm. Die Verwendung von Browserpräfixen ist genauso ungültig wie die Verwendung von browserspezifischen Hacks und hat keine Auswirkungen auf den Endbenutzer.

Abschließend

Ich verwende beide der oben genannten Lösungen, um Elemente richtig zu reagieren und gut miteinander zu spielen, ich flehe dich an, das Gleiche zu tun.


9



Ich benutze 2 und 4, wo zutreffend (d. H. Wenn ich die Höhe des Inhalts kenne oder wenn Überlaufen nicht schadet). Irgendwo sonst gehe ich mit Lösung 3 vor. Übrigens hat Ihre erste Lösung keinen Vorteil gegenüber 3 (die ich erkennen kann), weil sie nicht mehr semantisch ist, da sie dasselbe Dummy-Element verwendet.

Übrigens würde ich mich nicht darum kümmern, dass die vierte Lösung ein Hack ist. Hacks in CSS wären nur schädlich, wenn ihr zugrunde liegendes Verhalten einer Neuinterpretation oder anderen Veränderungen unterliegt. Auf diese Weise würde Ihr Hack nicht funktionieren. In diesem Fall hängt Ihr Hack jedoch vom genauen Verhalten ab overflow: auto ist gemeint zu haben. Es ist kein Nachteil, wenn Sie eine freie Fahrt machen.


6