Frage Welche Methoden von 'Clearfix' kann ich verwenden?


Ich habe das uralte Problem eines div Wrapping eines zweispaltigen Layouts. Meine Sidebar ist schwebend, also mein Container div kann den Inhalt und die Seitenleiste nicht umbrechen.

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

Es scheint zahlreiche Methoden zu geben, den Bug in Firefox zu beheben:

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

In meiner Situation scheint die einzige, die richtig zu funktionieren scheint, die <br clear="all"/> Lösung, die ein bisschen schmuddelig ist. overflow:auto gibt mir böse Scrollbalken, und overflow:hidden Muss sicherlich Nebenwirkungen haben. Außerdem sollte IE7 dieses Problem wegen seines inkorrekten Verhaltens nicht erleiden, aber in meiner Situation leidet es genauso wie Firefox.

Welche Methode ist derzeit für uns am robustesten?


809
2017-10-17 08:15


Ursprung


Antworten:


Abhängig von dem Design, das produziert wird, hat jede der folgenden Clearfix-CSS-Lösungen ihre eigenen Vorteile.

Der Clearfix hat nützliche Anwendungen, wurde aber auch als Hack verwendet. Bevor Sie einen Clearfix verwenden, können diese modernen CSS-Lösungen nützlich sein:


Moderne Clearfix-Lösungen


Behälter mit overflow: auto;

Die einfachste Methode zum Entfernen von floated-Elementen ist die Verwendung des Stils overflow: auto auf dem enthaltenden Element. Diese Lösung funktioniert in jedem modernen Browser.

<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 besteht darin, dass bei Verwendung bestimmter Kombinationen von Rand und Füllung auf dem externen Element Bildlaufleisten erscheinen, aber dies kann gelöst werden, indem der Rand und der Abstand auf einem anderen übergeordneten Element platziert werden.

Die Verwendung von 'overflow: hidden' ist auch eine Clearfix-Lösung, wird aber keine Scrollbalken verwenden hidden wird jeden Inhalt zuschneiden, der außerhalb des enthaltenden Elements positioniert ist.

Hinweis: Das schwebende Element ist ein img Tag in diesem Beispiel, könnte aber ein beliebiges HTML-Element sein.


Clearfix neu geladen

Thierry Koblentz auf CSSMojo schrieb: Der allerletzte Clearfix wurde neu geladen. Er merkte an, dass die Lösung durch das Löschen der Unterstützung für altIE auf eine CSS-Anweisung vereinfacht werden kann. Zusätzlich mit display: block (Anstatt von display: table) ermöglicht das korrekte Zusammenfassen von Rändern, 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 folgenden Lösungen sind für moderne Browser nicht erforderlich, können jedoch für die Ausrichtung auf ältere Browser hilfreich sein.

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

Sie sind grob 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 die zoom und ::before Eigenschaft / Werte und verwende einfach:

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

Diese Lösung unterstützt nicht IE 6/7 ... absichtlich!

Thierry bietet auch: "Ein Wort der Warnung: Wenn Sie ein neues Projekt von Grund auf neu starten, sollten Sie dieses Verfahren mit dem Programm, das Sie jetzt haben, nicht austauschen, da Ihre bestehenden Regeln, obwohl Sie nicht altIE unterstützen, kollabierende Ränder verhindern. "


Micro Clearfix

Die aktuellste und weltweit am weitesten verbreitete Clearfix-Lösung, die Micro 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 positionierter Inhalt nicht außerhalb der Grenzen des Containers angezeigt wird.

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

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

Anstatt das zu verwenden display Eigenschaft, um "hasLayout" für IE zu setzen, 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, Floats mit Hilfe der overflow Eigentum ist die Nutzung der Unterstrich-Hack. IE wendet die Werte an, denen der Unterstrich vorangestellt ist, andere Browser nicht. Das zoom Eigenschaft löst aus hasLayout in IE:

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

Während das funktioniert ... ist es nicht ideal, Hacks zu verwenden.


PIE: Einfache Reinigungsmethode

Diese ältere "Easy Clearing" -Methode hat den Vorteil, dass positionierte Elemente außerhalb der Grenzen des Containers hängen bleiben, auf Kosten von komplizierterem CSS.

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


Element, das die Eigenschaft "clear" verwendet

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

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

Nachteile

  • Es reagiert nicht und bietet daher möglicherweise nicht den gewünschten Effekt, wenn sich die Layoutstile aufgrund von Medienabfragen ändern. Eine Lösung in reinem CSS ist ideal.
  • Es fügt HTML-Markup hinzu, ohne notwendigerweise einen semantischen Wert hinzuzufügen.
  • Es erfordert eine Inline-Definition und -Lösung für jede Instanz anstelle einer Klassenreferenz für eine einzelne Lösung eines "Clearfix" in der CSS und Klassenverweise darauf im HTML.
  • Es erschwert den Umgang mit Code für andere, da sie möglicherweise mehr Hacks schreiben müssen, um damit umgehen zu können.
  • Wenn Sie in Zukunft eine andere Clearfix-Lösung benötigen / verwenden möchten, müssen Sie nicht mehr zurückgehen und alle löschen <br style="clear: both" /> Tags um das Markup verteilt.

1006
2017-10-27 19:37



Welche Probleme versuchen wir zu lösen?

Beim Floaten von Sachen gibt es zwei wichtige Überlegungen:

  1. Nachfahrende Schwimmer enthalten. Dies bedeutet, dass sich das betreffende Element selbst groß genug macht, um alle sich hin- und herbewegenden Nachkommen zu umhüllen. (Sie hängen nicht draußen.)

    Floating content hanging outside its container

  2. Isolierende Nachkommen von außen schweben. Dies bedeutet, dass Abkömmlinge innerhalb eines Elements verwendet werden können clear: both und nicht mit Floats außerhalb des Elements interagieren.

    <code>clear: both</code> interacting with a float elsewhere in the DOM

Formatieren von Kontexten

Es gibt nur eine Möglichkeit, beides zu tun. Und das ist ein neues zu etablieren Block Formatierungskontext. Elemente, die einen Blockformatierungskontext aufbauen, sind ein isoliertes Rechteck, in dem Floats miteinander interagieren. Ein Blockformatierungskontext ist immer groß genug, um die schwebenden Nachkommen optisch zu umschließen, und keine Gleitkommazahlen außerhalb eines Blockformatierungskontexts können mit Elementen darin interagieren. Diese Zwei-Wege-Isolierung ist genau das, was Sie wollen. In IE wird das gleiche Konzept aufgerufen hasLayout, die über eingestellt werden können zoom: 1.

Es gibt mehrere Möglichkeiten, einen Blockformatierungskontext zu erstellen, aber die Lösung, die ich empfehle, ist display: inline-block mit width: 100%. (Natürlich gibt es die übliche Vorbehalte mit benutzen width: 100%, also benutze es box-sizing: border-box oder setzen padding, margin, und border auf einem anderen Element.)

Die robusteste Lösung

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

Zuerst die Markup-Struktur.

<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 jetzt 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 */
}

Versuch es selber

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

Traditionelle Clearfix-Methoden gelten als schädlich

Das Problem mit dem Traditionellen Klarfix  Lösungen ist, dass sie zwei verschiedene Rendering-Konzepte verwenden, um das gleiche Ziel für IE und alle anderen zu erreichen. In IE verwenden sie hasLayout, um einen neuen Blockformatierungskontext zu erstellen, aber für alle anderen verwenden sie generierte Felder (:after) mit clear: both, die keinen neuen Blockformatierungskontext erstellt. Dies bedeutet, dass sich die Dinge nicht in allen Situationen gleich verhalten werden. Für eine Erklärung, warum das schlecht ist, siehe Alles, was Sie über Clearfix wissen, ist falsch.


67
2018-03-29 19:54



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

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

Anmerkungen

Denken Sie daran, dass Clearfixes im Wesentlichen ein Hack sind für das, was Flexbox-Layouts jetzt in einem bereitstellen können viel klüger. CSS-Floats wurden ursprünglich entwickelt, um Inline-Inhalte umzuleiten - wie Bilder in einem langen Textartikel - und nicht für Rasterlayouts und Ähnliches. Wenn dein Zielbrowser unterstützen flexboxEs lohnt sich, einen Blick darauf zu werfen.

Dies unterstützt IE7 nicht. Sie sollte nicht unterstützt IE7. Dies führt dazu, dass die Benutzer weiterhin unbefugten Sicherheitslücken ausgesetzt sind und das Leben für alle anderen Webentwickler schwieriger wird, da der Druck auf Benutzer und Organisationen, auf moderne Browser umzusteigen, verringert wird.

Dieser Clearfix war angekündigt und erläutert von Thierry Koblentz im Juli 2012. Es wirft unnötiges Gewicht ab Nicolas Gallaghers Micro-Clearfix 2011. Dabei wird ein Pseudoelement für den eigenen Gebrauch freigegeben. Dies wurde zur Verwendung aktualisiert display: block eher, als display: table (wieder, Kredit an Thierry Koblentz).


53
2018-04-19 07:28



Ich empfehle das Folgende zu verwenden, das stammt 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;  
}

27
2017-09-27 15:16



Die Überlaufeigenschaft kann verwendet werden, um Floats ohne zusätzliches Mark-up zu löschen:

.container { overflow: hidden; }

Dies funktioniert für alle Browser außer IE6, wo Sie nur hasLayout aktivieren müssen (Zoom ist meine bevorzugte Methode):

.container { zoom: 1; }

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


23
2018-02-10 11:20



Ich habe einen Fehler in der offiziellen CLEARFIX-Methode gefunden: Das DOT hat keine Schriftgröße. Und wenn Sie das einstellen height = 0 und das erste Element in deinem DOM-Baum hat die Klasse "clearfix" du hast immer einen Rand am Ende der Seite von 12px :)

Sie müssen es so beheben:

/* 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 ... Sieh es dir an - es ist sehr interessant! http://www.yaml.de/de/home.html


17
2018-01-20 15:50



Das ist eine ziemlich saubere 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+ und IE 6+ funktioniert

Einschließen der: vor Selektor ist nicht notwendig, um die Schwimmer zu löschen,   Es verhindert jedoch, dass obere Ränder in modernen Browsern kollabieren. Dies   stellt sicher, dass es eine visuelle Konsistenz mit IE 6/7 gibt, wenn zoom: 1 ist   angewendet.

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


15
2018-04-21 14:46