html tag Wie verhindern Sie, dass Eltern von schwebenden Elementen zusammenbrechen?




title tag wordpress (13)

Diese Frage hat hier bereits eine Antwort:

Obwohl Elemente wie <div> s normalerweise an ihre Inhalte angepasst werden, kann die Verwendung der float -Eigenschaft zu einem überraschenden Problem für CSS-Neulinge führen: 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 übergeordnete div in diesem Beispiel wird nicht erweitert , um seine floated-untergeordneten Elemente zu enthalten. Es wird scheinbar die 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>

Vorteile : Semantischer Code.
Nachteile : Möglicherweise möchten Sie nicht immer, dass der Elternteil schwimmt. 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>

Vorteile : 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>

Vorteile : 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>

Vorteile : Erfordert keine extra Div.
Nachteile : Scheint wie ein Hack - das ist nicht der erklärte Zweck der overflow Eigenschaft.

Bemerkungen? Andere Vorschläge?


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 übergeordneten DIV nicht einmal eine Klasse hinzufügen.

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 aber nicht getestet.

Lösung 3:

Es ist auch möglich, die display: inline-block; einzustellen 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.


Obwohl der Code nicht perfekt semantisch ist, denke ich, dass es einfacher ist, etwas zu haben, was ich ein "clearing div" am Ende jedes Containers mit Floats in ihm nenne. 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.


Die ideale Lösung wäre die Verwendung von inline-block für die Spalten anstelle von Floating. Ich denke, die Browser-Unterstützung ist ziemlich gut, wenn Sie (a) inline-block nur auf Elemente anwenden, die normalerweise inline sind (zB span ); und (b) fügen Sie -moz-inline-box für Firefox hinzu.

Ü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).


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

Lösung eins: klar: beides

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 (dh das Eingabeelement) zu arbeiten, können Sie nicht: nachher verwenden.

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.


Das Hauptproblem, das Sie beim Ändern des Überlaufs auf auto oder hidden ist, dass alles mit der mittleren Maustaste browserfähig ist und ein Benutzer das gesamte Layout der Website durcheinander bringen kann.


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 :)


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


Ich benutze 2 und 4 (wenn ich die Höhe des Inhalts kenne oder wenn das Ü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 von genau dem Verhalten ab, das overflow: auto soll gemeint sein. Es ist kein Nachteil, wenn Sie eine freie Fahrt machen.


Meine bevorzugte Methode ist die Verwendung einer Clearfix-Klasse für das Elternelement

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

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

Anstatt overflow:auto auf dem Eltern, 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.


Ich glaube, dass der beste Weg ist, clear:both für das kommende Element.

Hier ist der Grund:

1) :after Selektor in IE6 / 7 nicht unterstützt wird und in FF3 fehlerhaft ist,
wenn Sie nur über IE8 + und FF3.5 + Clearing mit: nach ist wahrscheinlich am besten für Sie ...

2) overflow soll etwas anderes machen, also ist dieser Hack nicht zuverlässig genug.

Hinweis für den Autor: Es gibt nichts Hackiges beim Clearing ... Clearing bedeutet, die Floating-Felder zu überspringen. CLEAR ist bei uns seit HTML3 (wer weiß, vielleicht noch länger) http://www.w3.org/MarkUp/html3/deflists.html , vielleicht sollten sie einen etwas anderen Namen wählen wie Seite: neu, aber das ist nur ein Detail ...


Eine der bekanntesten Lösungen ist eine Variation Ihrer Lösungsnummer 3, die ein Pseudo-Element anstelle eines nicht-semantischen HTML-Elements verwendet.

Es geht so ungefähr ...

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

Sie legen das in Ihr Stylesheet und Sie müssen lediglich die Klasse 'cf' zum Element mit den Floats hinzufügen.

Was ich benutze, ist eine andere Variante, die von Nicolas Gallagher kommt.

Es macht dasselbe, aber es ist kürzer, sieht besser aus und wird vielleicht verwendet, um etwas ganz Nützliches zu erreichen - das Verhindern, dass die Ränder der Kindelemente mit den Eltern kollabieren (aber dafür brauchst du etwas anderes - lies mehr darüber) hier http://nicolasgallagher.com/micro-clearfix-hack/ ).

.cf:after {
    content: " ";
    display: table;
    clear: float;
}

füge das im übergeordneten div am unteren Rand hinzu

 <div style="clear:both"></div>






css-float