Bagaimana untuk Mengosongkan Elemen Terapung dengan Berkesan dalam Reka Bentuk Web Moden?

Membersihkan Elemen Terapung:

Elemen terapung boleh mengganggu aliran reka letak halaman web, memerlukan kaedah untuk mengosongkan terapung dan membenarkan tindakan seterusnya elemen untuk diselaraskan dengan betul. Secara tradisinya, elemen
digunakan untuk tujuan ini.

Walau bagaimanapun, dengan kemajuan dalam teknik CSS, pilihan yang lebih cekap telah muncul. Penggodaman CSS yang disebut dalam soalan telah ditamatkan, manakala penggantinya menghadapi masalah keserasian yang berpotensi.

Amalan Terbaik Moden untuk Pembersihan Terapung:

Pada 2023, yang terbaik yang disyorkan amalan untuk membersihkan terapung adalah menggunakan teknik clearfix berdasarkan unsur pseudo. Kaedah ini bebas pelayar dan menghapuskan keperluan untuk sebarang penanda luar:

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

.cf:after {
    clear: both;
}

Untuk keserasian Internet Explorer 6/7, peraturan berikut diperlukan untuk mencetuskan "hasLayout" dan mengandungi terapung:

.cf {
    *zoom: 1;
}

Pilihan Alternatif:

Jika anda memerlukan limpahan yang berbeza harta untuk bekas anda, pendekatan alternatif ialah menggunakan limpahan: tersembunyi kepada induk unsur terapung. Teknik ini juga mengosongkan terapung merentasi penyemak imbas tanpa memerlukan penanda tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Mengosongkan Elemen Terapung dengan Berkesan dalam Reka Bentuk Web Moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!