Banyak orang telah mempelajari masalah penutupan elemen mengambang, namun solusinya berbeda, dan tidak setiap metode sempurna. Menutup elemen mengambang (atau membersihkan float) adalah masalah yang sering ditemui dalam desain standar web. Oleh karena itu, di sini saya ingin merangkum beberapa metode yang umum digunakan dan membandingkan kemudahan penggunaan dan lingkungan yang dapat diterapkan. Jika Anda memiliki cara yang lebih baik, silakan bawa untuk diskusi.

Kasus paling sederhana adalah kita menyertakan elemen div kecil dengan lebar tetap (seperti navigasi, referensi, dll.) dalam div besar bersama dengan konten elemen lainnya. Misalnya kode berikut:

Kita dapat menetapkan nilai lebar (misalnya, 20%) untuk "#inner", tetapi karena div adalah elemen tingkat blok, meskipun kita menyetel lebarnya, konten di baliknya hanya dapat ditampilkan di baris berikutnya kecuali kita berikan Atur properti float (float ke kiri atau float ke kanan). Maka masalah yang kami sebutkan diatas akan muncul saat ini.

Ini tidak akan menjadi masalah jika "#inner" memiliki lebar dan tinggi yang lebih kecil daripada "#outer".

Namun, jika tinggi "#inner" melebihi tinggi "#outer", maka bagian bawah akan melebihi bagian bawah "#outer". Ini karena setelah kita menyetel atribut float untuk "#inner", atribut tersebut akan melepaskan diri dari aliran teks, dan tidak peduli bagaimana lebar dan tingginya berubah, "#outer" tidak akan mengikuti perubahan tersebut.

Solusi:

1) Metode tag tambahan

Cara pertama dan metode yang direkomendasikan oleh W3C adalah dengan menggunakan tag tambahan. Metode ini adalah dengan menambahkan tag kosong di akhir konten. Pendekatan umumnya adalah dengan menggunakan sesuatu seperti:

Atau gunakan

Metode ini memaksa wadah luar meluas dengan menambahkan elemen HTML. Namun cara ini akan menambahkan tag tambahan dan membuat struktur HTML terlihat kurang ringkas.

Catatan: Saya menemukan bahwa di Internet Explorer (baik 6 atau 7)
dapat menghapus elemen mengambang, tetapi tidak dapat menutup elemen mengambang. Masalah ini tidak ada di Firefox ? !

2) Gunakan kelas semu setelahnya

untuk menambahkan konten baru di akhir konten saat ini yang ditentukan menggunakan kelas semu setelahnya dan deklarasi konten. Pendekatan yang umum adalah menambahkan "titik" karena lebih kecil dan kurang terlihat. Kemudian kita menggunakannya untuk menghapus float (menutup elemen float) dan menyembunyikan konten:
#luar:setelah{
isi:".";
tinggi:0;
visibilitas: tersembunyi;
tampilan:blok;
jelas: keduanya;

Yang aneh adalah Internet Explorer 6 dan di bawahnya di Windows tidak mendukung after pseudo-class di CSS 2.1, tetapi Internet Explorer di Mac dapat digunakan secara normal, jadi kita harus menangani Win/IE secara terpisah. Diantara sekian banyak cara membedakan Internet Explorer di Win dan Mac, cara yang paling umum digunakan adalah trik Holly, kode CSS:
/* Kode ini hanya dapat dilihat oleh IE/Win*/
aturan CSS
/*End Hack */

Ada dua baris komentar pada kode di atas, dan muncul tanda garis miring terbalik () di akhir baris pertama. Internet Explorer di Mac akan menganggap komentar tersebut belum berakhir, sehingga berlanjut hingga baris pertama. Muncul "*/" lengkap, dan semua karakter di tengah dianggap sebagai komentar, tetapi IE/Win hanya akan menganggap baris pertama dan ketiga sebagai komentar, dan baris tengah adalah kode yang valid. Jadi ini yang membedakan IE pada platform yang berbeda.

Berdasarkan prinsip di atas, untuk membersihkan float pada IE 6 di Windows, Anda dapat menggunakan kode berikut:

#luar {
tampilan: blok sebaris;
}
/* Holly Hack Dimulai */
* html #luar {
tinggi:1%;
}
#luar {
tampilan:blok;
}
/* Akhiri Peretasan */

PS Jika Anda tidak mempertimbangkan pengguna IE6/Mac, Anda hanya perlu menulis * html #outer {height:1%;}.
Selain itu, tampaknya display:inline-block tidak berfungsi dengan baik di Internet Explorer 7. Jadi gunakanlah trik Hack terlengkap.

3) Mengambang elemen eksternal. Cara float-in-float

sangat sederhana, yaitu dengan mengapungkan elemen "#outer" (ke kiri atau kanan).

Namun masalah lain yang ditimbulkan dari cara ini adalah elemen berikutnya yang berdekatan dengan "#outer" akan terpengaruh oleh "#outer" dan posisinya akan berubah, jadi Anda harus berhati-hati saat menggunakan cara ini. Ada opsi untuk mengapungkan semua elemen di halaman, dan terakhir menggunakan elemen bermakna yang sesuai (seperti footer) untuk membersihkan float. Ini membantu mengurangi markup yang tidak perlu, tetapi terlalu banyak float akan menambah kesulitan tata letak.

4) Setel overflow ke tersembunyi atau otomatis.

Atur

nilai overflow dari atribut "#outer" ke tersembunyi atau otomatis untuk juga membersihkan float.

Namun hati-hati saat menggunakan overflow karena mempengaruhi kinerja browser. Selain itu, menyetel overflow ke tersembunyi atau otomatis di Internet Explorer 6 tidak dapat menghapus float secara efektif (menutup elemen mengambang). Anda juga harus menentukan dimensi "#outer", yaitu menentukan lebar atau tinggi untuk elemen tersebut :
#luar {
overflow:otomatis;
lebar:100%;
}

Catatan: Jika Anda ingin menggunakan metode ini untuk menghapus float (menutup elemen mengambang) di IE5/Mac, Anda harus menyetel atribut overflow ke tersembunyi.

Bandingkan dan pilih

mana dari keempat metode tersebut yang terbaik? Pertama-tama, tidak disarankan untuk menggunakan kelas semu setelahnya. Dibandingkan dengan tiga metode lainnya, trik holly agak terlalu rumit dan sulit untuk dikuasai. Trik holly yang saya sebutkan di atas bukan hanya masalah di IE/. Menang Ketika: hover muncul, itu juga Akan ada masalah lain, jadi kami menambahkan atribut seperti inline-block, yang berarti ada lebih banyak ketidakpastian dalam metode ini. Direkomendasikan untuk orang yang "bersih" tentang kode dan memiliki keterampilan teknis yang tinggi.

Maka tiga cara lainnya sebenarnya bisa dipertimbangkan. Namun, ketika menggunakan overflow, ini mungkin berdampak pada kinerja halaman, dan dampak ini tidak pasti. Yang terbaik adalah menguji halaman Anda di beberapa browser

dan menggunakan tag tambahan untuk menghapus float (menutup elemen float), adalah praktik yang direkomendasikan oleh W3C. Sedangkan untuk menggunakan elemen
atau