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 habe einen Fehler in der offiziellen CLEARFIX-Methode gefunden: Der DOT hat keine Schriftgröße. Und wenn man den height = 0 und das erste Element in Ihrem DOM-Baum die Klasse "clearfix" hat, werden Sie immer einen Rand am unteren Rand der Seite von 12px haben :)

Sie müssen das so machen:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Es ist jetzt Teil des YAML-Layouts ... Schauen Sie es sich einfach mal an - es ist sehr interessant! http://www.yaml.de/en/home.html

Answer 2

Das ist eine recht ordentliche Lösung:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Es ist bekannt, dass es in Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ funktioniert.

Das Einfügen des Selektors :before ist nicht notwendig, um die Floats zu löschen, aber es verhindert, dass die oberen Ränder in modernen Browsern kollabieren. Diese wird sichergestellt, dass die visuelle Konsistenz mit IE 6/7 gegeben ist, wenn zoom:1 angewendet wird.

Von http://nicolasgallagher.com/micro-clearfix-hack/

Answer 3

Clearfix von bootstrap:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Answer 4

Ich benutze einfach :-

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

Funktioniert am besten und ist kompatibel mit IE8+ :)

Answer 5

In Anbetracht der riesigen Menge an Antworten wollte ich nicht posten. Allerdings kann diese Methode jemandem helfen, so wie sie mir geholfen hat.

Halten Sie sich nach Möglichkeit von Schwimmern fern

Es ist erwähnenswert, dass ich Schwimmer wie Ebola meide. Es gibt viele Gründe und ich bin nicht allein; Lesen Sie Rikudo Antwort über Was ist ein Clearfix? und Sie werden sehen, was ich meine. Mit seinen eigenen Worten: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

Es gibt noch andere gute (und manchmal bessere) Möglichkeiten als Schwimmer. Die Technologie schreitet voran und verbessert sich, flexbox (und andere Methoden) werden sich durchsetzen und Floats werden nur noch eine schlechte Erinnerung sein. Vielleicht ein CSS4?

---

Fehlverhalten von Schwimmern und fehlgeschlagene Löschungen

Zunächst einmal kann es vorkommen, dass man sich vor Schwimmern sicher wähnt, bis der Rettungsring durchstochen wird und der html-Strom zu sinken beginnt:

Im Codepen http://codepen.io/omarjuvera/pen/jEXBya unten, die Praxis der Freigabe eines Schwimmers mit <div classs="clear"></div> (oder ein anderes Element) ist üblich, aber verpönt und antisemantisch.

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Allerdings Gerade als Sie dachten, Ihr Floß sei segelfähig...bumm! Wenn die Bildschirmgröße immer kleiner wird, sieht man seltsame Verhaltensweisen wie in der folgenden Grafik (Gleiche http://codepen.io/omarjuvera/pen/jEXBya ):

Warum sollte Sie das interessieren? Ungefähr 80 % (oder mehr) der verwendeten Geräte sind mobile Geräte mit kleinen Bildschirmen. Desktop-Computer/Laptops sind nicht mehr der König.

---

Das ist noch nicht alles

Dies ist nicht das einzige Problem mit Schwimmern. Es gibt viele, aber in diesem Beispiel könnten einige sagen all you have to do is to place your floats in a container . Aber wie Sie in der Tabelle sehen können codepen und Grafik, das ist nicht der Fall. Es hat die Dinge offenbar schlimmer gemacht:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Und das Ergebnis?

Es ist das *** gleiche!

Sie werden eine CSS-Party starten, zu der Sie alle möglichen Selektoren und Eigenschaften einladen und Ihr CSS noch mehr durcheinander bringen, als Sie es zu Beginn getan haben. Nur um Ihren Float zu reparieren.

---

CSS Clearfix zur Rettung

Dieses einfache und sehr anpassungsfähige Stück CSS ist eine Schönheit und ein "Retter":

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Das war's! Es funktioniert wirklich, ohne die Semantik zu verletzen, und habe ich erwähnt es funktioniert? :

Aus der gleichen Stichprobe... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

Jetzt brauchen wir nicht mehr <div classs="clear"></div> <!-- Acts as a wall --> und die Semantikpolizei bei Laune halten. Dies ist nicht der einzige Vorteil. Dieses Clearfix passt sich jeder Bildschirmgröße an, ohne die Verwendung von @media in seiner einfachsten Form. Mit anderen Worten, es hält Ihren Float-Container in Schach und verhindert Überschwemmungen. Schließlich bietet es Unterstützung für alte Browser alle in einem kleinen Karate Chop =)

Hier ist noch einmal der Clearfix

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}