Utilizzo: dopo per cancellare gli elementi fluttuanti

Ho una lista e i li hanno un file float:left;. Il contenuto dopo il <ul>dovrebbe essere allineato correttamente. Quindi posso costruire quanto segue:

http://jsfiddle.net/8unU8/

Ho pensato, che posso rimuovere <div class="clear">usando pseudo selettori come: after.

Ma l'esempio non funziona:

http://jsfiddle.net/EyNnk/

Devo sempre creare un div separato per cancellare gli elementi mobili?

Scrivi così:

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

Controlla questo http://jsfiddle.net/EyNnk/1/

No, non è sufficiente fare qualcosa del genere:

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

E il seguente 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%;
}

Funzionerà anche:

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

.clearfix:after {
    clear: both;
}

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

Dare la classe clearfixal genitore elemento, ad esempio ilul elemento.

Fonti qui e qui .

Il testo "dasda" non sarà mai fuori da un tag, giusto? Semanticamente e per essere un HTML valido, basta aggiungere la classe clear a quello:

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

Uso

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

Molto simile alla soluzione fornita da Roko. Permette di inserire / modificare contenuti utilizzando: after e: before psuedo. Per i dettagli, consultare http://www.quirksmode.org/css/content.html