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

Je nach dem zu erstellenden Design hat jede der unten aufgeführten Clearfix-CSS-Lösungen ihre eigenen Vorteile.

Das Clearfix hat zwar nützliche Anwendungen, wurde aber auch schon als "Hack" eingesetzt. Bevor Sie einen Clearfix verwenden, können vielleicht diese modernen CSS-Lösungen nützlich sein:

• css flexbox
• css-Raster

---

Moderne Clearfix-Lösungen

---

Container mit overflow: auto;

Der einfachste Weg, schwebende Elemente zu löschen, ist die Verwendung des Stils overflow: auto auf das enthaltende Element. Diese Lösung funktioniert in allen modernen Browsern.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

Ein Nachteil ist, dass die Verwendung bestimmter Kombinationen von Margin und Padding auf dem externen Element dazu führen kann, dass Bildlaufleisten erscheinen, aber dies kann gelöst werden, indem der Margin und das Padding auf einem anderen übergeordneten Element platziert werden.

Die Verwendung von "overflow: hidden" ist ebenfalls eine einfache Lösung, aber es gibt keine Bildlaufleisten, während die Verwendung von hidden beschneidet jeden Inhalt, der sich außerhalb des enthaltenden Elements befindet.

Anmerkung: Das schwebende Element ist ein img Tag in diesem Beispiel, kann aber jedes beliebige HTML-Element sein.

---

Clearfix Reloaded

Thierry Koblentz auf CSSMojo schrieb: Das allerneueste Clearfix neu geladen . Er wies darauf hin, dass durch den Wegfall der Unterstützung für oldIE die Lösung auf eine css-Anweisung vereinfacht werden kann. Außerdem kann die Verwendung von display: block (anstelle von display: table ) ermöglicht es, dass die Ränder ordnungsgemäß kollabieren, wenn Elemente mit clearfix Geschwister sind.

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

Dies ist die modernste Version des Clearfix.

---

Ältere Clearfix-Lösungen

Die nachstehenden Lösungen sind für moderne Browser nicht erforderlich, können aber für die Ausrichtung auf ältere Browser nützlich sein.

Beachten Sie, dass diese Lösungen auf Browser-Fehlern beruhen und daher nur verwendet werden sollten, wenn keine der oben genannten Lösungen bei Ihnen funktioniert.

Sie sind ungefähr in chronologischer Reihenfolge aufgeführt.

---

"Beat That ClearFix", ein Clearfix für moderne Browser

Thierry Koblentz' von CSS Mojo hat darauf hingewiesen, dass wir bei der Ausrichtung auf moderne Browser jetzt auf die zoom と ::before Eigenschaften/Werte und verwenden Sie einfach:

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

Diese Lösung bietet keine Unterstützung für IE 6/7 absichtlich!

Thierry bietet auch an: " Ein Wort der Warnung Wenn Sie ein neues Projekt von Grund auf neu beginnen, können Sie das tun, aber tauschen Sie diese Technik nicht mit Ihrer jetzigen aus, denn auch wenn Sie oldIE nicht unterstützen, verhindern Ihre bestehenden Regeln, dass die Ränder kollabieren".

---

Mikro-Clearfix

Die neueste und weltweit angewandte Clearfix-Lösung, das Mikro-Clearfix von Nicolas Gallagher .

Bekannte Unterstützung: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

---

Überlaufeigenschaft

Diese grundlegende Methode wird für den üblichen Fall bevorzugt, wenn der positionierte Inhalt nicht außerhalb der Grenzen des Containers angezeigt werden soll.

http://www.quirksmode.org/css/clearing.html - erklärt, wie man die üblichen Probleme im Zusammenhang mit dieser Technik löst, nämlich die Einstellung width: 100% auf dem Container.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Anstatt die display Eigenschaft, um "hasLayout" für den IE festzulegen, andere Eigenschaften können verwendet werden für Auslösen von "hasLayout" für ein Element .

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Eine andere Möglichkeit, Schwebekörper zu löschen, ist die overflow Eigenschaft ist die Verwendung der Unterstrichhack . IE wendet die mit dem Unterstrich versehenen Werte an, andere Browser nicht. Die zoom Eigenschaftsauslöser hasLayout im IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Das funktioniert zwar... aber es ist nicht ideal, Hacks zu verwenden.

---

PIE: Einfache Clearing-Methode

Diese ältere "Easy Clearing"-Methode hat den Vorteil, dass positionierte Elemente außerhalb der Begrenzungen des Containers hängen können, allerdings auf Kosten eines komplizierteren CSS.

Diese Lösung ist ziemlich alt, aber Sie können alles über Easy Clearing auf Position Is Everything erfahren: http://www.positioniseverything.net/easyclearing.html

---

Element mit "clear"-Eigenschaft

Die schnelle und schmutzige Lösung (mit einigen Nachteilen), wenn Sie schnell etwas zusammenstellen wollen:

<br style="clear: both" /> <!-- So dirty! -->

Beeinträchtigungen

• Sie ist nicht responsiv und bietet daher möglicherweise nicht den gewünschten Effekt, wenn sich die Layout-Stile auf der Grundlage von Media-Queries ändern. Eine Lösung in reinem CSS ist idealer.
• Sie fügt HTML-Markup hinzu, ohne notwendigerweise einen semantischen Wert zu haben.
• Es erfordert eine Inline-Definition und -Lösung für jede Instanz anstelle eines Klassenverweises auf eine einzige Lösung eines "clearfix" in der CSS und Klassenverweise darauf in der HTML.
• Dies erschwert die Arbeit mit dem Code für andere, da sie möglicherweise weitere Hacks schreiben müssen, um das Problem zu umgehen.
• Wenn Sie in Zukunft eine andere Clearfix-Lösung verwenden müssen/wollen, müssen Sie nicht mehr alle <br style="clear: both" /> Tag im Markup verstreut.

Answer 2

Welche Probleme versuchen wir zu lösen?

Beim Floating gibt es zwei wichtige Überlegungen:

1. Enthält Nachkommastellen. Das bedeutet, dass das betreffende Element groß genug ist, um alle fließenden Nachkommen zu umhüllen. (Sie bleiben nicht draußen hängen.)

   

2. Isolierung der Nachkommenschaft von Außenschwimmern. Dies bedeutet, dass Nachkommen innerhalb eines Elements in der Lage sein sollten, die clear: both und nicht mit Schwebekörpern außerhalb des Elements interagieren lassen.

   

Kontexte für die Blockformatierung

Es gibt nur eine Möglichkeit, beides zu tun. Und das ist die Einrichtung einer neuen Kontext der Blockformatierung . Die Elemente, die einen Blockformatierungskontext bilden, sind ein isoliertes Rechteck, in dem Schwebekörper miteinander interagieren. Ein Blockformatierungskontext ist immer groß genug, um seine schwebenden Nachkommen visuell zu umhüllen, und keine schwebenden Elemente außerhalb eines Blockformatierungskontextes können mit Elementen innerhalb interagieren. Diese wechselseitige Isolierung ist genau das, was Sie wollen. Im IE wird dieses Konzept als hasLayout die über zoom: 1 .

Es gibt mehrere Möglichkeiten, einen Blockformatierungskontext zu erstellen, aber die von mir empfohlene Lösung ist display: inline-block mit width: 100% . (Natürlich gibt es die übliche Vorbehalte mit Hilfe von width: 100% also verwenden Sie box-sizing: border-box oder setzen padding , margin und border auf ein anderes Element).

Die robusteste Lösung

Die wohl häufigste Anwendung von Floats ist das zweispaltige Layout. (Kann auf drei Spalten erweitert werden.)

Zunächst die Auszeichnungsstruktur.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

Und nun das CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Versuchen Sie es selbst

Gehe zu JS-Behälter um mit dem Code herumzuspielen und zu sehen, wie diese Lösung von Grund auf aufgebaut ist.

Traditionelle Clearfix-Methoden gelten als schädlich

Das Problem mit der traditionellen clearfix Lösungen ist, dass sie zwei verschiedene Rendering-Konzepte verwenden, um das gleiche Ziel für den IE und alle anderen zu erreichen. Im IE verwenden sie hasLayout, um einen neuen Blockformatierungskontext zu erstellen, aber für alle anderen verwenden sie generierte Boxen ( :after ) mit clear: both , wodurch kein neuer Blockformatierungskontext erstellt wird. Das bedeutet, dass sich die Dinge nicht in allen Situationen gleich verhalten werden. Eine Erklärung, warum dies schlecht ist, finden Sie unter Alles, was Sie über Clearfix wissen, ist falsch .

Answer 3

Der neueste Standard, wie er von Inuit.css と Bourbon - zwei sehr weit verbreitete und gut gewartete CSS/Sass-Frameworks:

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

---

Anmerkungen

Denken Sie daran, dass Clearfixes im Wesentlichen ein Hack für das sind, was Flexbox-Layouts jetzt in einer viel einfacher und intelligenter Weg . CSS-Floats wurden ursprünglich für Inline-Inhalte entwickelt, die umherfließen sollen - wie Bilder in einem langen Textartikel - und nicht für Rasterlayouts und dergleichen. Sofern Sie nicht speziell auf den alten Internet Explorer (nicht Edge) abzielen, ist Ihr Zielbrowser unterstützen Flexbox Es lohnt sich also, sich damit zu befassen.

Der IE7 wird nicht unterstützt. Sie sollte nicht den IE7 unterstützen. Auf diese Weise werden die Nutzer weiterhin ungeschützten Sicherheitslücken ausgesetzt, und allen anderen Webentwicklern wird das Leben schwer gemacht, da der Druck auf Nutzer und Unternehmen, auf sicherere moderne Browser umzusteigen, abnimmt.

Dieses Clearfix wurde angekündigt und erläutert von Thierry Koblentz im Juli 2012. Es entlastet unnötiges Gewicht von Nicolas Gallagher's 2011 Mikro-Clearfix . Dabei wird ein Pseudo-Element für Ihre eigene Verwendung freigegeben. Dies wurde aktualisiert und verwendet nun display: block statt display: table (auch hier ein Dank an Thierry Koblentz).

Answer 4

Ich empfehle die Verwendung des folgenden Textes, der aus http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

Answer 5

Die Überlaufeigenschaft kann verwendet werden, um Floats ohne zusätzlichen Markup zu löschen:

.container { overflow: hidden; }

Dies funktioniert bei allen Browsern außer IE6, bei dem Sie lediglich hasLayout aktivieren müssen (Zoom ist meine bevorzugte Methode):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html