Menggunakan: setelah untuk menghapus elemen mengambang

Saya punya daftar dan li punya float:left;. Isi setelah <ul>harus diratakan dengan benar. Oleh karena itu saya dapat membangun yang berikut ini:

http://jsfiddle.net/8unU8/

Saya pikir, saya bisa menghapusnya <div class="clear">dengan menggunakan pseudo selector seperti: setelah.

Tapi contohnya tidak berhasil:

http://jsfiddle.net/EyNnk/

Apakah saya selalu harus membuat div terpisah untuk menghapus elemen mengambang?

Tulis seperti ini:

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

Periksa http://jsfiddle.net/EyNnk/1/ ini

Tidak, Anda tidak cukup melakukan sesuatu seperti ini:

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

Dan CSS berikut:

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%;
}

Ini akan bekerja juga:

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

.clearfix:after {
    clear: both;
}

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

Berikan kelas clearfixke elemen induk , misalnya ulelemen Anda .

Sumber di sini dan di sini .

Teks 'dasda' tidak akan pernah berada di dalam tag, bukan? Secara semantik dan agar menjadi HTML yang valid, cukup tambahkan kelas yang jelas untuk itu:

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

Menggunakan

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

Mirip seperti solusi yang diberikan oleh Roko. Memungkinkan untuk memasukkan / mengubah konten menggunakan: setelah dan: sebelum psuedo. Untuk detailnya, periksa http://www.quirksmode.org/css/content.html