Menggunakan: setelah untuk menghapus elemen mengambang

106

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?

html css Torben
sumber

Jawaban:

261

Tulis seperti ini:

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

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

sandeep
sumber
Ini adalah cara untuk melakukannya. tapi tolong perhatikan poin dalam jawaban saya tentang semantik.
Alex
2
Hanya sedikit info: ::afterdengan titik dua ganda adalah cara yang disarankan untuk menargetkan elemen semu.
Dennis98
11
Setiap browser yang mendukung titik dua ganda (: :) sintaks CSS3 juga hanya mendukung sintaks (:), tetapi IE 8 hanya mendukung titik dua tunggal, jadi untuk saat ini, disarankan untuk hanya menggunakan titik dua tunggal untuk dukungan browser terbaik. :: adalah format baru yang diindentasi untuk membedakan konten semu dari pemilih semu. Jika Anda tidak memerlukan dukungan IE 8, silakan gunakan titik dua ganda. css-tricks.com/almanac/selectors/a/after-and-before
retroriff
mengapa kita harus meletakkan ini: "content: ''; display: block;" ? dan bagaimana jika Anda menginginkan pembungkus sebaris?
Lucke
6

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%;
}
kernelpanic.dll
sumber
5

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 .

Mahdi
sumber
1
tampilan: tabel dapat menambahkan spasi ekstra; Saya menggunakan display: block sebagai gantinya
The Cog
0

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/

Alex
sumber
1
Itu sama sekali bukan semantik. 1) Kami selalu menghapus elemen induk jika anaknya mengapung di atasnya misalnya sesuai jawaban Anda jika saya ingin memberikan latar belakang ke dalam UL itu tidak menutupi LI karena UL tidak jelas & 2) Saya punya pertanyaan Mengapa Anda memberi jelas Kelas di DIV terpisah sebelum P. jika Anda memberikan kepada P saja itu juga berhasil
simpan
0

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

sachin kumar
sumber