Welche Methoden von "Clearfix" kann ich anwenden?

Question

Ich habe das uralte Problem eines div ein zweispaltiges Layout umhüllen. Meine Seitenleiste ist schwebend, so dass mein Container div den Inhalt und die Seitenleiste nicht umbrechen.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Es scheint zahlreiche Methoden zur Behebung des Clear-Bugs in Firefox zu geben:

• <br clear="all"/>
• overflow:auto
• overflow:hidden

In meinem Fall ist die einzige, die korrekt zu funktionieren scheint, die <br clear="all"/> Lösung, die ein wenig schmuddelig ist. overflow:auto gibt mir hässliche Bildlaufleisten, und overflow:hidden muss sicherlich Nebenwirkungen haben. Außerdem sollte der IE7 aufgrund seines fehlerhaften Verhaltens anscheinend nicht unter diesem Problem leiden, aber in meiner Situation leidet er genauso wie Firefox.

Welche Methode, die uns derzeit zur Verfügung steht, ist die robusteste?

Answer 1

Ich benutze immer die micro-clearfix :

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

Unter Kaskadenrahmen Ich wende sie sogar standardmäßig auf Elemente auf Blockebene an. IMO gibt die standardmäßige Anwendung auf Elemente der Blockebene den Elementen der Blockebene ein intuitiveres Verhalten als ihr traditionelles Verhalten. Außerdem wurde es dadurch für mich viel einfacher, dem Cascade Framework (das sowohl IE6-8 als auch moderne Browser unterstützt) Unterstützung für ältere Browser hinzuzufügen.

Answer 2

Angenommen, Sie verwenden diese HTML-Struktur:

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

Hier ist das CSS, das ich verwenden würde:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

Ich verwende diesen Satz ständig und er funktioniert gut, sogar im IE6.

Answer 3

Warum nur versuchen, css hack verwenden, um zu tun, was 1 Zeile HTML die Arbeit zu tun. Und warum nicht zu semantischen HTML tu setzen Pause, um die Zeile zurückzukehren verwenden?

Für mich ist es wirklich besser zu verwenden:

<br style="clear:both" />

Und wenn Sie keinen Stil in Ihrer HTML-Datei haben wollen, müssen Sie einfach class für Ihre Pause verwenden und setzen .clear { clear:both; } in Ihrem CSS.

Dies hat den Vorteil, dass

• Semantische Verwendung von html für die Rückkehr zur Zeile
• Wenn kein CSS geladen wird, funktioniert es
• Kein zusätzlicher CSS-Code und Hack erforderlich
• es ist nicht nötig, das br mit CSS zu simulieren, es ist bereits in HTML vorhanden

Answer 4

Im Gegensatz zu anderen Clearfixes ist hier ein offenes ohne Container

Andere Clearfixe erfordern entweder, dass sich das schwebende Element in einem gut abgegrenzten Container befindet, oder sie benötigen einen zusätzlichen, semantisch leeren <div> . Umgekehrt erfordert die klare Trennung von Inhalt und Markup eine strenge CSS-Lösung zu diesem Problem.

Die bloße Tatsache, dass man das Ende eines Schwimmkörpers markieren muss, lässt nicht zu, dass unbeaufsichtigter CSS-Satz .

Wenn letzteres Ihr Ziel ist, sollte der Float so lange offen bleiben, bis ein "clearfix" auftritt, so dass alles (Absätze, geordnete und ungeordnete Listen usw.) ihn umschließen kann. Das Clearfix könnte zum Beispiel durch eine neue Überschrift gesetzt werden.

Aus diesem Grund verwende ich bei neuen Überschriften das folgende Clearfix:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

Diese Lösung wird ausgiebig genutzt bei meine Website um das Problem zu lösen: Der Text neben einer schwebenden Miniatur ist kurz und der obere Rand des nächsten Clearing-Objekts wird nicht beachtet.

Außerdem wird bei der automatischen Generierung der Daten jeder manuelle Eingriff vermieden. PDFs von der Website. Hier ist eine Beispielseite .

Answer 5

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>