Ich habe das uralte Problem, ein divzweispaltiges Layout zu verpacken. Meine Seitenleiste ist schwebend, sodass mein Container divden Inhalt und die Seitenleiste nicht umschließt.

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

Es scheint zahlreiche Methoden zu geben, um den eindeutigen Fehler in Firefox zu beheben:

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

In meiner Situation scheint die <br clear="all"/>Lösung, die etwas ungepflegt ist, die einzige zu sein, die richtig zu funktionieren scheint . overflow:autogibt mir böse Bildlaufleisten und overflow:hiddenmuss sicherlich Nebenwirkungen haben. Außerdem sollte IE7 anscheinend aufgrund seines falschen Verhaltens nicht unter diesem Problem leiden, aber in meiner Situation leidet es genauso wie Firefox.

Welche derzeit verfügbare Methode ist die robusteste?

Abhängig vom produzierten Design 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 möglicherweise nützlich sein:

• CSS Flexbox
• CSS-Raster

Moderne Clearfix-Lösungen

Behälter mit overflow: auto;

Der einfachste Weg, schwebende Elemente zu löschen, ist die Verwendung des Stils overflow: autofür 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 bei Verwendung bestimmter Kombinationen von Rand und Auffüllung des externen Elements kann dazu führen, dass Bildlaufleisten angezeigt werden. Dies kann jedoch behoben werden, indem der Rand und der Abstand auf einem anderen übergeordneten Element platziert werden.

Die Verwendung von 'overflow: hidden' ist ebenfalls eine Clearfix-Lösung, verfügt jedoch nicht über Bildlaufleisten. Bei Verwendung von hiddenwird jedoch der Inhalt außerhalb des enthaltenen Elements zugeschnitten .

Hinweis: Das schwebende Element ist imgin diesem Beispiel ein Tag, kann jedoch ein beliebiges HTML-Element sein.

Clearfix neu geladen

Thierry Koblentz über CSSMojo schrieb: Der neueste Clearfix wurde neu geladen . Er stellte fest, dass durch das Wegfallen der Unterstützung für oldIE die Lösung auf eine CSS-Anweisung vereinfacht werden kann. Durch die Verwendung von display: block(anstelle von display: table) können Ränder außerdem ordnungsgemäß reduziert werden, 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 Browserfehlern beruhen und daher nur 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 , wenn modernen Browser - Targeting können wir jetzt fallen die zoomund ::beforeEigentum / Werte und einfach zu verwenden:

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

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

Thierry bietet außerdem an: " Ein Wort der Vorsicht : Wenn Sie ein neues Projekt von Grund auf neu starten, versuchen Sie es, aber tauschen Sie diese Technik nicht gegen die aus, die Sie jetzt haben, denn obwohl Sie oldIE nicht unterstützen, verhindern Ihre bestehenden Regeln dies kollabierende Ränder. "

Micro Clearfix

Die neueste und weltweit verbreitete Clearfix-Lösung, der 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;
}

Überlauf-Eigenschaft

Diese grundlegende Methode wird im Normalfall bevorzugt, wenn der positionierte Inhalt nicht außerhalb der Grenzen des Containers angezeigt wird.

http://www.quirksmode.org/css/clearing.html - Erläutert, wie häufig auftretende Probleme im Zusammenhang mit dieser Technik behoben werden, nämlich das Festlegen width: 100%des Containers.

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

Anstatt die displayEigenschaft zum Festlegen von "hasLayout" für den IE zu verwenden, können andere Eigenschaften zum Auslösen von "hasLayout" für ein Element verwendet werden .

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

Eine andere Möglichkeit, Floats mithilfe der overflowEigenschaft zu löschen, ist die Verwendung des Unterstrich-Hacks . IE wendet die mit dem Unterstrich vorangestellten Werte an, andere Browser nicht. Die zoomEigenschaft löst hasLayout im IE aus:

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

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

PIE: Einfache Clearing-Methode

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

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 der Eigenschaft "clear"

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 idealer.
• 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 eines Klassenverweises auf eine einzelne Lösung eines „Clearfix“ im CSS und Klassenverweise darauf im HTML.
• Es macht es für andere schwierig, mit Code zu arbeiten, da sie möglicherweise mehr Hacks schreiben müssen, um ihn zu umgehen.
• Wenn Sie in Zukunft eine andere Clearfix-Lösung benötigen / verwenden möchten, müssen Sie nicht mehr jedes <br style="clear: both" />Tag entfernen, das um das Markup herum verstreut ist.

Welche Probleme versuchen wir zu lösen?

Beim Floating gibt es zwei wichtige Überlegungen:

1. Enthält Nachkommenschwimmer. Dies bedeutet, dass das betreffende Element groß genug ist, um alle schwebenden Nachkommen einzuschließen. (Sie hängen nicht draußen.)

   

2. Isolierende Nachkommen von außen schwimmen. Dies bedeutet, dass Nachkommen innerhalb eines Elements in der Lage sein sollten, clear: bothFloats außerhalb des Elements zu verwenden und nicht mit diesen zu interagieren.

   

Formatierungskontexte blockieren

Es gibt nur einen Weg, beides zu tun. Und das ist, um einen neuen Blockformatierungskontext einzurichten . Elemente, die einen Blockformatierungskontext herstellen, sind ein isoliertes Rechteck, in dem Floats miteinander interagieren. Ein Blockformatierungskontext ist immer groß genug, um seine schwebenden Nachkommen visuell zu verpacken, und keine Gleitkommazahlen außerhalb eines Blockformatierungskontexts dürfen mit Elementen innerhalb interagieren. Diese bidirektionale Isolierung ist genau das, was Sie wollen. Im IE heißt das gleiche Konzept hasLayout , das über festgelegt werden kann zoom: 1.

Es gibt verschiedene Möglichkeiten, einen Blockformatierungskontext einzurichten, aber die von mir empfohlene Lösung ist display: inline-blockmit width: 100%. (Natürlich gibt es die üblichen Warnungen bei der Verwendung width: 100%, so Verwendung box-sizing: border-boxoder Put padding, marginund borderauf 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

Gehen Sie zu JS Bin , 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 bei den herkömmlichen Clearfix- Lösungen besteht darin, dass sie zwei verschiedene Rendering-Konzepte verwenden, um dasselbe Ziel für den Internet Explorer und alle anderen zu erreichen. Im IE verwenden sie hasLayout, um einen neuen Blockformatierungskontext einzurichten, aber für alle anderen verwenden sie generierte boxen ( :after) mit clear: both, wodurch kein neuer Blockformatierungskontext erstellt wird. Dies bedeutet, dass sich die Dinge nicht in allen Situationen gleich verhalten. Eine Erklärung, warum dies schlecht ist, finden Sie unter Alles , was Sie über Clearfix wissen, ist falsch .

Der neue Standard, wie er von Inuit.css und Bourbon verwendet wird - 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 für das sind, was Flexbox-Layouts jetzt auf viel intelligentere Weise bereitstellen können . CSS-Floats wurden ursprünglich für Inline-Inhalte entwickelt, die wie Bilder in einem langen Textartikel herumfließen, und nicht für Rasterlayouts und dergleichen. Wenn Ihre Zielbrowser Flexbox unterstützen, lohnt es sich, einen Blick darauf zu werfen .

Dies unterstützt IE7 nicht. Sie sollten IE7 nicht unterstützen. Dies setzt Benutzer weiterhin nicht festgelegten Sicherheits-Exploits aus und erschwert allen anderen Webentwicklern das Leben, da Benutzer und Organisationen weniger gezwungen sind, auf moderne Browser umzusteigen.

Dieser Clearfix wurde im Juli 2012 von Thierry Koblentz angekündigt und erklärt . Er entlastet den 2011er Micro-Clearfix von Nicolas Gallagher unnötig . Dabei wird ein Pseudoelement für den eigenen Gebrauch freigegeben. Dies wurde aktualisiert, um es display: blocknicht zu verwenden display: table(wiederum Dank an Thierry Koblentz).

Ich empfehle die Verwendung der folgenden Informationen , die von http://html5boilerplate.com/ stammen.

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

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

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

Ich habe einen Fehler in der offiziellen CLEARFIX-Methode gefunden: Der DOT hat keine Schriftgröße. Und wenn Sie das height = 0und das erste Element in Ihrem DOM-Baum mit der Klasse "clearfix" setzen, haben Sie 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 ... Schau es dir an - es ist sehr interessant! http://www.yaml.de/en/home.html

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

Das Einfügen des: before-Selektors ist nicht erforderlich, um die Floats zu löschen, verhindert jedoch, dass die oberen Ränder in modernen Browsern zusammenfallen. Dies stellt sicher, dass eine visuelle Konsistenz mit IE 6/7 besteht, wenn Zoom: 1 angewendet wird.

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

Clearfix vom Bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

Ich benutze nur: -

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

Funktioniert am besten und ist kompatibel mit IE8 + :)

Angesichts der großen Anzahl von Antworten wollte ich nicht posten. Diese Methode kann jedoch jemandem helfen, wie es mir geholfen hat.

Halten Sie sich nach Möglichkeit von Schwimmern fern

Es ist erwähnenswert, ich vermeide Schwimmer wie Ebola. Es gibt viele Gründe und ich bin nicht allein; Lesen Sie die Antwort von Rikudo über einen 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 andere gute (und manchmal bessere) Optionen als Floats. Mit fortschreitender und verbesserter Technologie werden Flexbox (und andere Methoden) weit verbreitet sein und Floats werden nur zu einem schlechten Gedächtnis. Vielleicht ein CSS4?

Float Fehlverhalten und fehlgeschlagene Clearings

Zunächst einmal denken Sie manchmal, dass Sie vor Schwimmern sicher sind, bis Ihr Lebensretter durchstochen ist und Ihr HTML-Fluss zu sinken beginnt:

Im folgenden Codepen http://codepen.io/omarjuvera/pen/jEXBya ist die Praxis, einen Float mit <div classs="clear"></div>(oder einem anderen Element) zu löschen , ü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;
}

Doch gerade als Sie dachten, Ihr Schwimmer sei segelwürdig ... Boom! Wenn die Bildschirmgröße immer kleiner wird, sehen Sie seltsame Verhaltensweisen wie in der folgenden Grafik (Same http://codepen.io/omarjuvera/pen/jEXBya ):

Warum sollte es dich interessieren? Ich bin mir der genauen Zahl nicht sicher, aber ungefähr 80% (oder mehr) der verwendeten Geräte sind mobile Geräte mit kleinen Bildschirmen. Desktop-Computer / Laptops sind nicht mehr König.

Es endet nicht dort

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

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;
}

Wie für das Ergebnis?

Es ist das gleiche!

Wenigstens wissen Sie, dass Sie eine CSS-Party starten und alle Arten von Selektoren und Eigenschaften zur Party einladen. Machen Sie Ihr CSS größer als das, womit Sie begonnen haben. Nur um Ihren Schwimmer 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 ist es! Es funktioniert wirklich, ohne die Semantik zu brechen, und habe ich erwähnt, dass es funktioniert? ::

Aus dem gleichen Beispiel ... 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 <div classs="clear"></div> <!-- Acts as a wall -->und halten wir die semantische Polizei nicht mehr bei Laune. Dies ist nicht der einzige Vorteil. Dieser Clearfix reagiert auf jede Bildschirmgröße ohne die Verwendung @mediain seiner einfachsten Form. Mit anderen Worten, es hält Ihren Schwimmerbehälter in Schach und verhindert Überschwemmungen. Schließlich bietet es Unterstützung für alte Browser 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 */
}

Ich schwebe immer die Hauptabschnitte meines Gitters und clear: both;bewerbe mich auf die Fußzeile. Das erfordert keine zusätzliche Div oder Klasse.

ehrlich; Alle Lösungen scheinen ein Hack zu sein, um einen Rendering-Fehler zu beheben ... irre ich mich?

Ich habe festgestellt <br clear="all" />, dass es das einfachste und einfachste ist. Sehen class="clearfix"überall kann die Gefühle von jemandem nicht Schlaganfall , die auf fremde markeup Elemente Objekte, kann es? Sie malen das Problem nur auf eine andere Leinwand.

Ich benutze auch die display: hiddenLösung, die großartig ist und keine zusätzlichen Klassendeklarationen oder HTML-Markups erfordert ... aber manchmal braucht man die Elemente, um den Container zu überlaufen, z. hübsche Bänder und Schärpen

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

Ich habe alle diese Lösungen ausprobiert. <html>Wenn ich den folgenden Code verwende, wird dem Element automatisch ein großer Rand hinzugefügt :

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

Schließlich löste ich das Randproblem, indem ich font-size: 0;das obige CSS hinzufügte .

Bei SASS lautet der Clearfix:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

und es wird verwendet wie:

.container {
    @include clearfix;
}

Wenn Sie den neuen Clearfix möchten:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

Mit LESS ( http://lesscss.org/ ) kann ein praktischer Clearfix-Helfer erstellt werden:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

Und dann verwenden Sie es mit problematischen Behältern, zum Beispiel:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Verwenden von overflow:hidden/auto und height für ie6 reicht aus, wenn der schwebende Container ein übergeordnetes Element hat.

Jeder der # Tests könnte funktionieren, wenn der unten angegebene HTML-Code Floats löscht.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

In Fällen, in denen dies nicht mit ie6 funktioniert, schweben Sie einfach das übergeordnete Element, um float zu löschen.

#test {
  float: left; // using float to clear float
  width: 99%;
}

Ich brauchte noch nie eine andere Art von Lichtung. Vielleicht schreibe ich so mein HTML.

Ein neuer Anzeigewert erscheint dem Job in einer Zeile.

display: flow-root;

Aus der W3-Spezifikation: "Das Element generiert eine Blockcontainerbox und legt seinen Inhalt mithilfe des Ablauflayouts an. Es erstellt immer einen neuen Blockformatierungskontext für seinen Inhalt."

Informationen: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ Wie im obigen Link gezeigt, ist die Unterstützung derzeit begrenzt, sodass Fallback-Unterstützung wie unten von Nutzen sein kann: https://github.com/fliptheweb/postcss-flow-root

Ich würde auch schweben #content, auf diese Weise enthalten beide Spalten Floats. Auch, weil Sie damit Elemente im Inneren löschen können, #contentohne die Seitenleiste zu löschen .

Das Gleiche gilt für den Wrapper. Sie müssen ihn zu einem Blockformatierungskontext machen, um die beiden Spalten zu umbrechen.

In diesem Artikel werden einige Trigger erwähnt, die Sie verwenden können: Blockformatierungskontexte .

Ein Clearfix ist eine Möglichkeit für ein Element, automatisch nach sich selbst zu löschen, sodass Sie kein zusätzliches Markup hinzufügen müssen.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

Normalerweise müssten Sie Folgendes tun:

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

Mit clearfix müssen Sie nur

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

Warum nur versuchen, CSS-Hack zu verwenden, um zu tun, was 1 Zeile HTML den Job macht. Und warum nicht semantisches HTML verwenden, um eine Pause einzulegen und zur Zeile zurückzukehren?

Für mich ist es wirklich besser zu verwenden:

<br style="clear:both" />

Und wenn Sie keinen Stil in Ihrem HTML wollen, müssen Sie nur Klasse für Ihre Pause verwenden und .clear { clear:both; }in Ihr CSS einfügen.

Vorteil davon:

• 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
• Sie müssen das br nicht mit CSS simulieren, es ist bereits in HTML vorhanden

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 benutze dieses Set die ganze Zeit und es funktioniert gut für mich, auch in IE6.

Im Gegensatz zu anderen Clearfixes handelt es sich hier um ein offenes ohne Container

Bei anderen Clearfixes muss sich das schwebende Element entweder in einem gut markierten Container befinden oder es muss ein zusätzliches, semantisch leeres Element vorhanden sein <div>. Umgekehrt erfordert eine klare Trennung von Inhalt und Markup eine strikte CSS-Lösung für dieses Problem.

Die bloße Tatsache, dass man das Ende eines Floats markieren muss, erlaubt keinen unbeaufsichtigten CSS-Satz .

Wenn letzteres Ihr Ziel ist, sollte der Float für alles (Absätze, geordnete und ungeordnete Listen usw.) offen bleiben, bis ein "Clearfix" gefunden wird. Beispielsweise kann der Clearfix durch eine neue Überschrift festgelegt werden.

Aus diesem Grund verwende ich den folgenden Clearfix mit neuen Überschriften:

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

Diese Lösung wird auf meiner Website häufig verwendet , um das Problem zu lösen: Der Text neben einer schwebenden Miniatur ist kurz und der obere Rand des nächsten Löschobjekts wird nicht beachtet.

Es verhindert auch manuelle Eingriffe beim automatischen Generieren von PDFs von der Site. Hier ist eine Beispielseite .

Ich benutze immer den Micro-Clearfix :

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

.cf:after {
    clear: both;
}

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

In Cascade Framework wende ich es sogar standardmäßig auf Elemente auf Blockebene an. IMO, das standardmäßig auf Elemente auf Blockebene angewendet wird, bietet Elementen auf Blockebene ein intuitiveres Verhalten als ihr traditionelles Verhalten. Es hat mir auch das Hinzufügen von Unterstützung für ältere Browser zu Cascade Framework (das sowohl IE6-8 als auch moderne Browser unterstützt) erheblich erleichtert.

Sie können dies auch in Ihr CSS einfügen:

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

Und fügen Sie Ihrem übergeordneten div die Klasse "cb" hinzu:

<div id="container" class="cb">

Sie müssen Ihrem ursprünglichen Code nichts anderes hinzufügen ...

Haben Sie das versucht:

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

Ich hatte keine Probleme mit dieser Methode.

Meine Lieblingsmethode ist das Erstellen einer Clearfix-Klasse in meinem CSS / SCSS-Dokument wie folgt

.clearfix{
    clear:both
}

Und rufen Sie es dann in meinem HTML-Dokument auf, wie unten gezeigt

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

Es ist so einfach, dass clearfix das Problem löst, indem wir die float-Eigenschaften innerhalb des div-Elements verwenden. Wenn wir zwei div-Elemente verwenden, eines als float: left; und andere als float: richtig; Wir können Clearfix für das übergeordnete Element der beiden div-Elemente verwenden. Wenn wir uns weigern, Clearfix zu verwenden, füllen Sie unnötige Leerzeichen mit den folgenden Inhalten und die Site-Struktur wird beschädigt.