Verwenden von: after, um schwebende Elemente zu löschen

105

Ich habe eine Liste und die Li haben eine float:left;. Der Inhalt nach dem <ul>sollte korrekt ausgerichtet sein. Daher kann ich folgendes bauen:

http://jsfiddle.net/8unU8/

Ich dachte, dass ich das <div class="clear">mit Pseudo-Selektoren wie: after entfernen kann .

Aber das Beispiel funktioniert nicht:

http://jsfiddle.net/EyNnk/

Muss ich immer ein separates Div erstellen, um schwebende Elemente zu löschen?

html css Torben
quelle

Antworten:

260

Schreiben Sie so:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Überprüfen Sie diese http://jsfiddle.net/EyNnk/1/

Sandeep
quelle
So geht's. Bitte beachten Sie jedoch den Punkt in meiner Antwort zur Semantik.
Alex
2
Nur eine kleine Info: ::afterMit Doppelpunkt ist die empfohlene Methode, um auf Pseudoelemente abzuzielen.
Dennis98
11
Jeder Browser, der den Doppelpunkt (: :) CSS3-Syntax unterstützt, unterstützt auch nur die (:) -Syntax, aber IE 8 unterstützt nur den Einzelpunkt. Daher wird empfohlen, für die beste Browserunterstützung nur den Einzelpunkt zu verwenden. :: ist das neuere Format, das eingerückt wird, um Pseudoinhalte von Pseudoselektoren zu unterscheiden. Wenn Sie keine IE 8-Unterstützung benötigen, können Sie den Doppelpunkt verwenden. css-tricks.com/almanac/selectors/a/after-and-before
Retroriff
warum sollten wir dies setzen: "content: ''; display: block;" ? und was ist, wenn Sie einen Inline-Wrapper wollen?
Lucke
6

Nein, es reicht nicht aus, so etwas zu tun:

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

Und das folgende CSS:

ul li {float: left;}


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

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}
Kernelpanic
quelle
5

Dies wird auch funktionieren:

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

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

Geben Sie die Klasse clearfixdem übergeordneten Element, z. B. Ihrem ulElement.

Quellen hier und hier .

Mahdi
quelle
1
Anzeige: Tabelle kann zusätzlichen Abstand hinzufügen; Ich benutze stattdessen display: block
The Cog
0

Der Text 'dasda' wird niemals nicht innerhalb eines Tags sein, oder? Semantisch und um gültiges HTML zu sein, fügen Sie einfach die klare Klasse hinzu:

http://jsfiddle.net/EyNnk/2/

Alex
quelle
1
Es ist überhaupt keine Semantik. 1) Wir löschen immer das Elternelement, wenn sein Kind darauf schwebt, zum Beispiel gemäß Ihrer Antwort. Wenn ich Hintergrundinformationen zum UL geben möchte, werden die LIs nicht abgedeckt, da das UL nicht klar ist. 2) Ich habe eine Frage, warum Sie klar geben Klasse in einem separaten DIV vor P. Wenn Sie nur P geben, ist es auch Arbeit
Sandeep
0

Verwenden

.wrapper:after {
    content : '\n';
}

Ähnlich wie die Lösung von Roko. Es ermöglicht das Einfügen / Ändern von Inhalten mit: after und: before psuedo. Weitere Informationen finden Sie unter http://www.quirksmode.org/css/content.html

Sachin Kumar
quelle