Wie verhindert man, dass die Eltern von schwebenden Elementen zusammenbrechen?

Question

Obwohl Elemente wie <div> s wachsen normalerweise, um ihren Inhalt anzupassen, indem die float Eigenschaft kann für CSS-Neulinge ein verblüffendes Problem darstellen: Wenn schwebende Elemente nicht schwebende übergeordnete Elemente haben, wird das übergeordnete Element eingeklappt.

Zum Beispiel:

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

Das übergeordnete Div in diesem Beispiel wird nicht expandieren um seine schwebenden Kinder zu enthalten - es wird so aussehen, als hätte es height: 0 .

Wie kann man dieses Problem lösen?

Ich möchte hier eine erschöpfende Liste von Lösungen erstellen. Wenn Ihnen browserübergreifende Kompatibilitätsprobleme bekannt sind, weisen Sie bitte darauf hin.

Lösung 1

Das Elternteil schweben lassen.

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

Profis : Semantischer Code.
Nachteile : Es kann sein, dass Sie das übergeordnete Element nicht immer schweben lassen wollen. Selbst wenn Sie dies tun, müssen Sie die Eltern der Eltern floatet, und so weiter? Müssen Sie jedes Vorgängerelement freilassen?

Lösung 2

Geben Sie dem Elternteil eine eindeutige Höhe.

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

Profis : Semantischer Code.
Nachteile : Nicht flexibel - wenn sich der Inhalt ändert oder die Größe des Browsers verändert wird, bricht das Layout zusammen.

Lösung 3

Fügen Sie ein "Spacer"-Element innerhalb des übergeordneten Elements ein, etwa so:

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

Profis : Einfach zu codieren.
Nachteile : Nicht semantisch; das Spacer-Div existiert nur als Layout-Hack.

Lösung 4

Elternteil auf overflow: auto .

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

Profis : Benötigt kein zusätzliches div.
Nachteile : Scheint ein Hacker zu sein - das ist nicht die overflow den angegebenen Zweck der Immobilie.

Kommentare? Andere Vorschläge?

Answer 1

Lösung 1:

Die zuverlässigste und unauffälligste Methode scheint diese 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-Zielsetzung müssen Sie dem übergeordneten Element nicht einmal eine Klasse hinzufügen DIV .

Diese Lösung ist abwärtskompatibel mit IE8, so dass Sie sich keine Sorgen machen müssen, dass ältere Browser ausfallen könnten.

Lösung 2:

Es wurde eine Anpassung der Lösung 1 vorgeschlagen, die wie folgt aussieht:

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 abwärtskompatibel zu IE5.5 zu sein, ist aber nicht getestet.

Lösung 3:

Es ist auch möglich, die display: inline-block; y width: 100%; um ein normales Blockelement zu emulieren, das nicht kollabiert.

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

CSS :

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

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

Answer 2

Ich verwende normalerweise die overflow: auto Trick; obwohl das streng genommen nicht der beabsichtigte Verwendungszweck für den Überlauf ist, ist es es irgendwie verwandt - genug, um es sich leicht merken zu können, auf jeden Fall. Die Bedeutung von float: left selbst wurde für verschiedene Verwendungszwecke stärker erweitert als der Überlauf in diesem Beispiel, IMO.

Answer 3

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

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

div {
  overflow:hidden;
}

Dann brauche ich mir keine Sorgen zu machen.

Answer 4

Das Problem tritt auf, wenn ein schwebendes Element innerhalb eines Containerkastens ist, dass das Element nicht automatisch die Höhe des Containers erzwingt, um das schwebende Element anzupassen. Wenn ein Element in der Schwebe ist, enthält es sein übergeordnetes Element nicht mehr, weil die Schwebe aus dem Fluss entfernt wird. Sie können 2 Methoden verwenden, um dies zu beheben:

• { clear: both; }
• clearfix

Sobald Sie verstanden haben, was passiert ist, können Sie die nachstehende Methode anwenden, 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 :)

Answer 5

Es gibt mehrere Versionen des Clearfix, mit Nicolas Gallagher y Thierry Koblentz als Hauptautoren.

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

.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 Ihnen die Unterstützung für ältere Browser egal ist, gibt es eine kürzere Version:

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