Welche Methoden der ‚clearfix‘ kann ich verwenden?

https://stackoverflow.com/questions/211383

css
clearfix

03-07-2019
|

Frage

Ich habe das uralte Problem eines div eine zweispaltige Layout gewickelt wird. Meine Sidebar schwebt, so dass mein Behälter div nicht den Inhalt und Seitenleiste wickeln.

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

Es scheint zahlreiche Methoden zur Befestigung der klaren Fehler in Firefox zu sein:

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

In meiner Situation, die einzige, die ordnungsgemäß zu funktionieren scheint, ist die <br clear="all"/> Lösung, die ein wenig ungepflegt ist. overflow:auto gibt mir böse Bildlaufleisten und overflow:hidden müssen sicherlich Nebenwirkungen haben. Auch sollte IE7 offenbar nicht unter diesem Problem leidet wegen seines falschen Verhalten, aber in meiner Situation es leidet die gleiche wie Firefox.

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

Lösung

auf das Design Je hergestellt sind, wobei jede der folgenden clearfix CSS-Lösungen hat seine eigenen Vorteile.

Die clearfix hat nützliche Anwendungen haben, aber es hat auch als Hack verwendet. Bevor Sie eine clearfix verwenden vielleicht diese modernen CSS-Lösungen können nützlich sein:

Modern Clearfix Lösungen

Container mit `overflow: auto;`

Der einfachste Weg, schwebte Elemente löschen wird mit dem Stil overflow: auto auf dem Aufnahmeelement. 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, den Einsatz bestimmter Kombinationen von Rand und Polsterung auf dem externen Element können Bildlaufleisten erscheinen lassen, aber dies kann durch Platzieren der Rand und Polsterung auf einer anderen Mutterelement enthält, gelöst werden.

Mit ‚overflow: hidden‘ ist auch eine clearfix Lösung, aber nicht Scrollbalken haben jedoch hidden mit beliebigem Inhalt beschneidet außerhalb des enthaltenden Elements positioniert

. Hinweis: Der Floats ist ein img-Tag in diesem Beispiel aber könnte jedes HTML-Element sein

Clearfix Reloaded

Thierry Koblentz auf CSSMojo schrieb: Die neuesten clearfix neu geladen . Er wies darauf hin, dass durch die Unterstützung fällt für Oldie kann die Lösung zu einer CSS-Anweisung vereinfacht werden. Zusätzlich display: block mit (statt display: table) ermöglicht Margen richtig kollabieren, wenn Elemente mit clearfix sind Geschwister.

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

Dies ist die modernste Version der clearfix.

⋮

Ältere Clearfix Lösungen

Die folgenden Lösungen sind für modernen Browser nicht erforderlich, können aber für das Targeting älteren Browser nützlich sein.

Beachten Sie, dass diese Lösungen auf Browserbugs verlassen und daher sollten nur verwendet werden, wenn keine der oben genannten Lösungen für Sie arbeiten.

Sie werden grob in chronologischer Reihenfolge aufgelistet.

"Beat That clearfix", ein clearfix für modernen Browser

Thierry Koblentz‘von CSS Mojo hat darauf hingewiesen, dass, wenn modernen Browser-Targeting können wir jetzt fallen die zoom und ::before Eigenschaft / Werte und einfach verwenden:

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

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

Thierry bietet auch: „ Ein Wort der Vorsicht: , wenn Sie beginnen ein neues Projekt von Grund auf neu, denn es gehen, aber diese Technik nicht mit dem du jetzt hast, tauschen, denn auch wenn Sie nicht oldIE unterstützen, Ihre bestehenden Regeln kollabiert Margen zu verhindern. "

Micro Clearfix

Die jüngste und global clearfix Lösung angenommen, 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;
}

Überlauf Property

Dieses grundlegende Verfahren ist für den üblichen Fall bevorzugt, wenn positionierten Inhalte außerhalb der Grenzen des Behälters nicht zeigen werden.

http://www.quirksmode.org/css/clearing.html - wird erläutert, wie häufig auftretende Probleme lösen auf diese Technik verwandt, nämlich Einstellung width: 100% auf dem Behälter

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

Rather die display Eigenschaft als mit „hasLayout“ für IE, andere Eigenschaften festlegen können Auslösung "hasLayout" für ein Element .

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

Eine andere Art und Weise schwimmt zu löschen, die overflow Eigenschaft mit der Strich Hack verwenden. IE die Werte mit dem Präfix Unterstrich gelten, anderer Browser nicht. Die zoom Eigenschaft löst hasLayout in IE:

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

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

PIE: Leicht Clearing-Methode

Diese ältere „Easy Clearing“ Methode hat den Vorteil, dass positionierte Elemente außerhalb der Grenzen des Behälters, auf Kosten von komplizierter CSS.

hängen

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

-Element mit "clear" Eigenschaft

Die schnelle und schmutzige Lösung (mit einigen Nachteilen) für, wenn Sie schnell etwas Slapping zusammen:

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

Nachteile

Es ist nicht ansprechbar und somit nicht den gewünschten Effekt liefern kann, wenn Layout-Stile auf Medienanfragen basierend ändern. Eine Lösung in reinem CSS ist ideal.
Sie fügt HTML-Markup, ohne notwendigerweise Hinzufügen einer semantischen Wert.
Es erfordert eine Inline-Definition und Lösung für jede Instanz statt einer Klasse Bezug auf eine einzige Lösung eines „clearfix“ in den CSS und Klasse Verweisen auf sie in dem HTML-Code.
Es macht Code schwer für andere zu arbeiten, da sie mehr Hacks schreiben müssen möglicherweise um ihn zu arbeiten.
In der Zukunft, wenn Sie brauchen / wollen eine andere clearfix Lösung verwenden, werden Sie nicht zurück zu gehen und jeden Tag <br style="clear: both" /> um das Markup übersät entfernen.

Andere Tipps

Welche Probleme versuchen wir zu lösen?

Es gibt zwei wichtige Überlegungen bei der Floating-Material:

Nachkomme Schwimmer enthält. Das bedeutet, dass das Element in Frage macht sich groß genug, um alle schwebenden Nachkommen zu wickeln. (Sie nicht nach draußen hängen.)
Isolier-Nachkommen von außen schwebt. Das bedeutet, dass Nachkommen innerhalb eines Elements der Lage sein sollten clear: both verwenden und haben es nicht mit Schwimmern außerhalb des Elements in Wechselwirkung treten.

Block Formatierung Kontexte

Es gibt nur einen Weg, diese beiden zu tun. Und das ist einen neuen Blockformatierungskontext zu etablieren. Elemente, die einen Blockforma Kontext aufzubauen sind ein isoliertes Rechteck, in dem Schwimmer miteinander interagieren. Ein Blockformatierungskontext wird immer groß genug sein, um visuell zu seiner schwimmenden Nachkommen wickeln, und es werden keine Schwimmer außerhalb eines Blockformatierungs Zusammenhang mit Elementen im Inneren in Wechselwirkung treten können. Diese Zwei-Wege-Isolierung ist genau das, was Sie wollen. Im IE wird dieses gleiche Konzept namens hasLayout , die über display: inline-block eingestellt werden können.

Es gibt mehr Möglichkeiten, einen Block-Formatierungskontext zu schaffen, aber die Lösung, die ich empfehlen ist width: 100% mit width: 100%. (Natürlich gibt es die üblichen Warnungen mit box-sizing: border-box verwenden, so verwenden padding oder setzen margin, border, und :after auf einem anderen Element.)

Die robusteste Lösung

Die wohl häufigste Anwendung von Schwimmern ist das Zwei-Spalten-Layout. (Kann auf drei Spalten erweitert werden.)

Zuerst wird 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 nun die 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

Zur JS Bin mit dem Code zu spielen, um zu sehen, wie diese Lösung aus gebaut der Boden.

Traditionelle clearfix Methoden schädlich

betrachtet

Das Problem mit dem traditionellen clearfix Alles, was Sie wissen über Clearfix Wrong ist.

Der neue Standard, und wurde von Inuit.css und Bourbon - zwei sehr weit verbreitet und gut gepflegt CSS / Sass-Frameworks:

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

Notizen

Beachten Sie, dass clearfixes sind im Wesentlichen ein Hack für das, was Flexbox Layouts können nun in einer intelligentere Weise . CSS Schwimmern wurde ursprünglich entwickelt für die Inline-Inhalt um fließen - wie Bilder in einem langen Text-Artikel - und nicht für Rasterlayouts und dergleichen. Wenn Ihr Zielbrowser Flexbox unterstützen, es lohnt sich ein Blick in.

Dies gilt nicht IE7 unterstützt. Sie nicht IE7 unterstützen. Dabei setzt Benutzer nicht fixierte Sicherheitslücken aufzudecken und macht das Leben härter für alle anderen Web-Entwickler, da es den Druck auf die Benutzer und Organisationen reduziert sich auf moderne Browser zu wechseln.

Dieses clearfix wurde angekündigt und erklärt Thierry Koblentz 2012 Juli 2011 Es wirft unnötiges Gewicht von Nicolas Gallaghers Mikro-clearfix . In dem Prozess, befreit es ein Pseudo-Element für den eigenen Gebrauch. Dies wurde aktualisiert display: block zu verwenden, anstatt display: table (wieder Kredit zu Thierry Koblentz).

Ich empfehle die folgenden verwenden, die sich von http://html5boilerplate.com/

genommen wird

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

Der Überlauf Eigenschaft kann verwendet werden, schwebt ohne zusätzlichen Aufschlag zu löschen:

.container { overflow: hidden; }

Dies funktioniert für alle Browser außer IE6, wo alles, was Sie tun müssen, ist hasLayout ermöglichen (Zoom meine bevorzugte Methode ist):

.container { zoom: 1; }

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

Ich habe einen Fehler in der offiziellen clearfix-Methode gefunden: Die DOT keinen font-size. Und wenn Sie die height = 0 und das erste Element in Ihrem DOM-Baum hat die Klasse „clearfix“ gesetzt werden Sie durchweg eine Marge am unteren Rand der Seite von 12px haben:)

Sie müssen es wie dieses Problem zu beheben:

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

Es ist jetzt Teil der YAML-Layout-... Werfen Sie einen Blick auf sie - es ist sehr interessant! http://www.yaml.de/en/home.html

Dies ist eine recht 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, in Firefox arbeiten 3.5+, Safari 4+, Chrome, Opera 9+, IE 6 +

Einschließlich den: vor Selektor ist nicht notwendig, den Schwimmer zu löschen,   aber es verhindert, dass Top-Margen von in modernen Browsern kollabieren. Diese   stellt sicher, dass mit dem IE 6/7 es visuelle Konsistenz ist, wenn Zoom: 1   angewendet wird.

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

Clearfix von Bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

ich nur verwenden: -

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

Funktioniert am besten und kompatibel mit IE8 +:)

, um die riesige Menge an Antworten Da ich nicht gonna Post. Jedoch kann diese Methode jemand helfen, wie es mir geholfen hat.

Bleibt Weg von Schwimmern, wenn möglich

Es lohnt sich zu erwähnen, ich vermeiden Schwimmern wie Ebola. Es gibt viele Gründe, und ich bin nicht allein; Lesen Rikudo Antwort über was ein clearfix ist, und Sie werden sehen, was ich meine. In seinen eigenen Worten: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

Es gibt auch andere gute (und manchmal besser) Optionen gibt andere als Schwimmer. Die Entwicklung schreitet voran und verbessert, Flexbox (und andere Methoden) werden weithin angenommen und Schwimmer wird sich nur ein schlechtes Gedächtnis werden. Vielleicht ein CSS4?

Float Fehlverhalten und gescheiterter Clears

Zunächst einmal, manchmal können Sie denken, dass Sie von Schwimmern sicher sind, bis Ihr retter durchstochen wird und Ihre HTML-Fluss beginnt zu sinken:

In der codepen http://codepen.io/omarjuvera/pen/jEXBya unten die Praxis, einen Schwimmer mit <div classs="clear"></div> (oder einem anderen Elemente) des Löschens ist üblich, aber missbilligen und anti-semantisches.

<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 , nur, wenn Sie dachten, dass Ihr Schwimmer Segel wert ... Boom! Da die Bildschirmgröße kleiner und kleiner wird, sehen Sie seltsame Verhalten in wie die Grafik unten (Same http: // codepen .io / omarjuvera / pen / jEXBya ):

float bug Probe 1

Warum sollten Sie darauf? Ich bin nicht sicher über die genaue Zahl, aber etwa 80% (oder mehr) der verwendeten Geräte sind mobile Geräte mit kleinen Bildschirmen. Desktop-Computer / Laptops sind nicht mehr König.

Es ist noch nicht alles

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 in der codepen und Grafik sehen können, das ist nicht der Fall. Es machte offenbar Dinge Schlimmste:

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 ***! float bug Probe 2

Least Sie wissen, haben Sie eine CSS-Party beginnen, alle Arten von Selektoren einladend und Eigenschaften der Partei; Herstellung eines größeren Durcheinander von CSS als das, was mit Ihnen den Start. Nur Ihren Schwimmer zu beheben.

CSS Clearfix zur Rettung

Dieses einfache und sehr anpassungsfähig 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 Semantik zu brechen und habe ich schon erwähnt es funktioniert :

Aus der gleichen Probe ... 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>  und halten die semantische Polizei glücklich. Dies ist nicht der einzige Vorteil. Diese clearfix reagiert auf jede Bildschirmgröße ohne die Verwendung von @media in der einfachsten Form. Mit anderen Worten, es wird Ihren Schwimmerbehälter in Schach zu halten und zu verhindern Flutungen. Schließlich bietet es Unterstützung für alten Browser alle in einem kleinen Karateschlag =)

Hier ist die clearfix wieder

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

ich immer die Hauptabschnitte meines Gitter schweben und clear: both; in die Fußzeile anwenden. Das bedeutet nicht, eine extra div oder Klasse benötigen.

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

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

ich verwende auch die display: hidden Lösung, die groß ist und benötigt keine zusätzliche Klassendeklarationen oder HTML-Markup ... aber manchmal müssen Sie die Elemente des Behälters, zum Beispiel zum Überlaufen. hübsche Bänder und Schärpen

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

ich all diese Lösungen haben versucht, wird eine große Marge hinzugefügt werden, automatisch <html> Element, wenn ich den Code verwenden unter:

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

Schließlich habe ich löste das Problem, indem Marge font-size: 0; dem obigen CSS hinzufügen.

Mit SASS, die clearfix ist:

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

und es wird verwendet, wie:

.container {
    @include clearfix;
}

Wenn Sie die neuen clearfix wollen:

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

Mit weniger ( http://lesscss.org/ ) kann man einen handlichen clearfix Helfer erstellen:

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

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

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

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

Mit overflow:hidden / auto und Höhe für IE6 genügt, wenn der schwimmende Container ein übergeordnetes Element hat.

Entweder eine der #test funktionieren könnte, für die HTML unten angegebenen Schwimmern zu löschen.

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

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

In den Fällen, wenn diese sich weigert, mit IE6 zu arbeiten, schweben nur die Eltern klar zu schweben.

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

Sie nie wirklich jede andere Art benötigt noch von Clearing. Vielleicht ist es die Art, wie ich meinen HTML schreiben.

Ich würde schweben #content Auch auf diese Weise beiden Spalten Schwimmer enthalten. Auch, weil es erlaubt Ihnen, Elemente innerhalb #content zu löschen, ohne die Seitenleiste zu löschen.

Die gleiche Sache mit dem Wrapper, werden Sie es ein Blockformatierungskontext machen müssen, um die zwei Spalten zu wickeln.

In diesem Artikel erwähnt ein paar Trigger Sie verwenden können: Blockformatierungs Kontexten .

Ein clearfix ist eine Möglichkeit für ein Element automatisch klar nach sich, so dass Sie benötigen, um zusätzliche Markup nicht hinzuzufügen.

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

Normalerweise müssen Sie etwas tun, wie folgt:

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

Mit clearfix, Sie benötigen

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

Ein neuer Anzeigewert scheint auf den Job in einer Zeile.

display: flow-root;

Von der w3 spec: „. Das Element erzeugt einen Block Behälterbox und legt seinen Inhalt Flow Layout mit Er stellt immer einen neuen Block-Formatierungskontext für seinen Inhalt“

Information: https://www.w3.org/TR / CSS-display-3 / # valdef-Display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ Wie in dem obigen Link dargestellt ist, wird Unterstützung zur Zeit so Ausweich Unterstützung wie unten begrenzt von Nutzen sein kann: https://github.com/fliptheweb/postcss-flow-root

Warum nur versuchen, CSS Hack zu verwenden, um zu tun, was eine HTML-Zeile des Job. Und warum nicht semantisches HTML verwenden tu Pause auf die Linie zurück setzen?

Fo mich ist wirklich besser zu nutzen:

<br style="clear:both" />

Und wenn Sie keinen Stil in Ihrem HTML wollen, müssen Sie einfach Klasse für Ihren Urlaub nutzen und setzen .clear { clear:both; } in Ihrem CSS.

Vorteil dieses:

Semantic Verwendung von HTML für die Rückkehr in die Zeile
Wenn kein CSS Last wird es funktionieren
Keine Notwendigkeit, zusätzliche CSS-Code und Hack
keine Notwendigkeit, das br mit CSS zu simulieren, es ist bereits in HTML existiert

Angenommen, Sie diese HTML-Struktur verwenden:

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

Hier ist die CSS, die 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 das die ganze Zeit festgelegt und es funktioniert gut für mich, auch in IE6.

ich immer verwenden die Mikro-clearfix :

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

.cf:after {
    clear: both;
}

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

Cascade Rahmen ich es auch standardmäßig auf Blockebene anwenden Elemente. IMO, es ist standardmäßig auf Blockebene Elementen Anwendung gibt Blockebene Elementen intuitives Verhalten als ihr traditionelles Verhalten. Es machte auch viel einfacher es für mich Cascade Framework-Unterstützung für älteren Browser hinzufügen (die IE6-8 sowie moderne Browser unterstützt).

Im Gegensatz zu anderen clearfixes, hier ist ein offen man ohne Container

Andere clearfixes erfordern entweder die Floats in einem gut abgegrenzte Behälter sein oder eine zusätzliche, semantisch leer <div> müssen. Im Gegensatz dazu klare Trennung von Inhalt und Markup erfordert eine strenge CSS-Lösung für dieses Problem.

Die bloße Tatsache, dass man das Ende eines Schwimmers markieren muss, darf nicht für unbeaufsichtigt CSS Satz- .

Wenn letzteres Ihr Ziel ist es, soll der Schwimmer für alles offen gelassen wird (Absätze, geordnete und ungeordnete Listen etc.), um es zu wickeln, bis ein „clearfix“ angetroffen wird. Zum Beispiel könnte die clearfix durch eine neue Überschrift gesetzt werden.

Aus diesem Grunde verwende ich die folgende clearfix mit neuen Rubriken:

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

Der Text:

wird diese Lösung ausgiebig auf meiner Website das Problem zu lösen verwendet neben einem schwebte Miniatur ist kurz und die obersten Rand des Objekts nächsten Lichtung nicht eingehalten wird.

Es verhindert auch jegliche manuelle Eingriffe bei der automatischen Erzeugung von PDFs von der Website . Hier ist ein Beispiel rel="nofollow.

Sie können dies auch in Ihrem CSS setzen:

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

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

Und fügen Klasse "cb" auf Ihre Eltern div:

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

Sie werden nicht brauchen, um etwas anderes zu Ihrem ursprünglichen Code hinzufügen ...

#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>

Haben Sie versucht, diese:

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

Ich habe keine Probleme gehabt mit dieser Methode.

Meine bevorzugte Methode ist eine clearfix Klasse in meinem css / SCSS Dokument wie unten

erstellen

.clearfix{
    clear:both
}

Und es dann in meinem HTML-Dokument aufrufen, 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>

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow