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 lasse die Hauptabschnitte meines Rasters immer schweben und wende clear: both; in die Fußzeile. Dafür ist kein zusätzliches Div oder eine Klasse erforderlich.

Answer 2

Ehrlich gesagt, scheinen alle Lösungen ein Hack zu sein, um einen Rendering-Fehler zu beheben ... liege ich da falsch?

Ich habe gefunden <br clear="all" /> am leichtesten und einfachsten zu sein. class="clearfix" Man kann nicht überall die Gefühle von jemandem ansprechen, der fremde Markierungselemente ablehnt, oder? Sie malen das Problem nur auf eine andere Leinwand.

Ich benutze auch die display: hidden Lösung, die großartig ist und keine zusätzlichen Klassendeklarationen oder HTML-Auszeichnungen erfordert ... aber manchmal müssen die Elemente über den Container hinausgehen, z. B. für hübsche Bänder und Schärpen

Answer 3

Ein neuer Anzeigewert erscheint zum Auftrag in einer Zeile.

display: flow-root;

Aus der W3-Spezifikation: "Das Element erzeugt eine Block-Container-Box und legt seinen Inhalt unter Verwendung des Flow-Layouts aus. Es stellt immer einen neuen Blockformatierungskontext für seinen Inhalt her."

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

Wie aus dem obigen Link hervorgeht, ist die Unterstützung derzeit begrenzt, so dass eine Ausweichlösung wie die nachstehende von Nutzen sein kann: https://github.com/fliptheweb/postcss-flow-Root

Answer 4

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

Answer 5

Bei SASS lautet das Clearfix:

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

und es wird verwendet wie:

.container {
    @include clearfix;
}

wenn Sie das neue Clearfix wünschen:

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