Welche Methoden von "Clearfix" kann ich anwenden?

Question

Welche Methoden von "Clearfix" kann ich anwenden?

Gefragt el 17 de Oktober, 2008: Wann wurde die Frage gestellt
486154 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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?

Gefragt el 17 de Oktober, 2008 von Chris J Allen

1 Stimmen

Ich benutze jqui.net/tips-tricks/css-clearfix es hilft mir, den Punkt zu verstecken :)

Kommentiert el 20 de September, 2012 von Val

1 Stimmen

Was ist mit IE 6 und IE 7? Sie folgen nie dem richtigen Weg, Dinge zu bereinigen.

Kommentiert el 22 de November, 2012 von Praveen Kumar Purushothaman

0 Stimmen

Besteht nach einem Jahr die Möglichkeit, die korrekte Antwort auf den modernen dreizeiligen Clearfix zu überarbeiten? hier wie sie in den bekannten Frameworks Bourbon und Inuit.css verwendet wird? Siehe meine Antwort unten .

Kommentiert el 29 de August, 2013 von iono

Answer 1

5 Antworten

Answer 2

5voto

draco Punkte 91

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

Jede der beiden #Tests könnte funktionieren, für die unten angegebene HTML, um Floats 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 Fällen, in denen dies mit IE6 nicht funktioniert, können Sie das übergeordnete Element einfach auf "float" setzen.

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

Ich habe noch nie eine andere Art von Räumung gebraucht. Vielleicht liegt es an der Art, wie ich mein HTML schreibe.

Beantwortet el 27 de August, 2009 von draco (91 Punkte )

Answer 3

5voto

jmu Punkte 3549

Mit LESS ( http://lesscss.org/ ), kann man einen praktischen Clearfix-Helfer erstellen:

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

Und dann z. B. bei problematischen Behältern einsetzen:

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

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

Beantwortet el 20 de Marsch, 2013 von jmu (3549 Punkte )

Answer 4

4voto

John Xiao Punkte 1528

Ich habe alle diese Lösungen ausprobiert, ein großer Spielraum wird hinzugefügt <html> Element automatisch, wenn ich den unten stehenden Code verwende:

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

Schließlich habe ich das Randproblem durch Hinzufügen von font-size: 0; zum obigen CSS.

Beantwortet el 2 de September, 2012 von John Xiao (1528 Punkte )

Answer 5

3voto

Thierry Koblentz Punkte 201

Ich würde schweben #content zu, so dass beide Spalten Schwebekörper enthalten. Auch weil es Ihnen erlaubt, Elemente innerhalb von #content ohne 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 umschließen.

In diesem Artikel werden einige Auslöser genannt, die Sie verwenden können: Blockformatierungskontexte .

Beantwortet el 26 de Kann, 2010 von Thierry Koblentz (201 Punkte )

Answer 6

3voto

Gaurang Punkte 1908

Ein clearfix ist eine Möglichkeit, ein Element automatisch nach sich selbst zu löschen, so dass 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 wie folgt vorgehen:

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

Beantwortet el 26 de Oktober, 2012 von Gaurang (1908 Punkte )

Welche Methoden von "Clearfix" kann ich anwenden?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Welche Methoden von "Clearfix" kann ich anwenden?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: