Clear floating adalah sesuatu yang pasti ditemui oleh setiap orang yang membuat halaman, namun dapatkah semua orang mengetahuinya dengan jelas dan memahaminya secara komprehensif? Jadi saya menulis artikel seperti ini segera setelah saya punya waktu luang. Saya tidak bisa meliput semuanya, tapi pada dasarnya saya bisa mengajari semua orang apa yang saya ketahui.
Mari kita lihat secara kasar berapa banyak metode yang ada untuk menghapus float (saya tidak akan menulis tentang penggunaan zoom:1 di IE, tapi saya akan menulisnya di topik berikutnya). DEMO yang sesuai
- Gunakan pseudo-class:after untuk menghapus lapisan pseudo-class dengan ketinggian nol untuk kontrol kosong selanjutnya.
- Gunakan CSS overflow:auto untuk mendukung ketinggian
- Menggunakan CSS overflow:hidden untuk menghasilkan adaptasi yang aneh
- Gunakan display:table untuk mengubah objek menjadi bentuk tabel
- Gunakan tag div dan atribut css yang jelas
- Gunakan tag br dan atribut css yang jelas
- Gunakan tag br dan atribut jelas HTML-nya sendiri
Secara kasar, keduanya dapat menyelesaikan masalah; namun, keduanya memiliki kelebihan dan kekurangan masing-masing. (korespondensi satu lawan satu)
- Semantik struktur keunggulan sepenuhnya benar dan tidak akan muncul masalah aneh lainnya.
Kerugian Metode penggunaan kembali yang tidak tepat dapat dengan mudah menyebabkan peningkatan tajam dalam volume kode.
Disarankan untuk menggunakannya ketika lapisan terluar sedikit mengambang, atau bagi orang yang memahami metode penggunaan kembali modular. - Keuntungan : Struktur semantiknya sepenuhnya benar dan jumlah kodenya sangat sedikit.
Kekurangan : Setelah beberapa kali bersarang, mengklik kotak mengambang ringan terluar akan menyebabkan semua konten dari lapisan terluar hingga lapisan terdalam dipilih (FF); atau ketika gerakan mouse menyebabkan lebar berubah, modul terluar akan memiliki gulir bilah (YAITU).
Disarankan untuk menggunakan modul dalam satu modul, jangan disarangkan. - Keuntungan : Struktur semantiknya sepenuhnya benar dan jumlah kodenya sangat sedikit.
Kekurangan: Saat konten bertambah, mudah untuk membungkus garis secara otomatis dan konten disembunyikan.
Disarankan untuk digunakan ketika lebarnya tetap dan tidak bersarang. - Keuntungan : Struktur semantiknya sepenuhnya benar dan jumlah kodenya sangat sedikit.
Sifat-sifat model kotak kekurangan telah berubah. Dapat dibayangkan bahwa ada lebih banyak kejadian aneh daripada yang dapat Anda hitung.
Disarankan jika Anda tidak ingin memperbaiki bug dan membunuh Anda, sebaiknya jangan menggunakannya, namun ini dapat digunakan sebagai penipuan sementara dalam versi alfa untuk pengujian; - Keuntungan: Jumlah kode sangat kecil dan dapat digunakan kembali sangat tinggi.
Kerugiannya adalah tidak dapat beradaptasi secara sempurna dengan semantik dan tidak kondusif untuk revisi dan menuntut perubahan.
Direkomendasikan untuk pemula, ini memungkinkan Anda menyelesaikan masalah mengambang dengan cepat. - Keuntungan: Tingkat semantiknya lebih baik daripada kasus kelima; jumlah kodenya sangat kecil dan kegunaannya kembali sangat tinggi.
Kekurangan: Semantiknya masih belum sempurna sehingga tidak kondusif untuk revisi dan menuntut perubahan.
Direkomendasikan untuk pemula, ini memungkinkan Anda menyelesaikan masalah mengambang dengan cepat. - Keuntungan: Tingkat semantiknya lebih baik daripada kasus 5 dan 6; jumlah kodenya minimal dan kegunaannya kembali sangat tinggi.
Kekurangan: Semantiknya masih belum sempurna sehingga tidak kondusif untuk revisi dan menuntut perubahan.
Disarankan untuk memandu pemula untuk menggunakannya saat meningkatkan pemikiran mereka, sehingga mereka memahami bahwa daripada menggunakan nama kelas untuk mengontrol kinerja, lebih baik kembali ke halaman web era WEB1.0 dan langsung menggunakan atribut html untuk mengontrol kinerja Lagi pula, yang terakhir memiliki lebih sedikit kode.
Akhirnya, daftarnya selesai. Namun, saya rasa perlu meminta maaf kepada semua orang atas artikel yang saya cetak ulang di Ghost; Saya sangat menyesal karena saya mengubah judul Ghost dari "paling mudah" menjadi "optimal", yang kemudian menyesatkan banyak siswa. Jadi saya menulis ulang artikel untuk dibagikan kepada Anda.
Teks asli: http://webteam.tencent.com/?p=1122
