Apakah 5 cara untuk membersihkan terapung?

Lima cara untuk mengosongkan apungan ialah: 1. Gunakan atribut jelas; 2. Gunakan atribut limpahan; Pengenalan terperinci: 1. Gunakan atribut jelas, yang merupakan kaedah yang paling biasa digunakan untuk mengosongkan apungan Anda boleh menambah elemen selepas elemen terapung dan menambah "jelas: kedua-duanya;" menggunakan atribut limpahan tetapkan elemen induk Tetapkan "overflow: auto;" dan seterusnya.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Dalam CSS, terdapat lima cara utama untuk mengosongkan terapung, iaitu:

1 Gunakan atribut jelas: Ini ialah kaedah yang paling biasa digunakan untuk mengosongkan terapung. Anda boleh menambah elemen selepas elemen terapung dan menambah jelas: kedua-duanya; Elemen ini boleh menjadi elemen DOM sebenar atau ia boleh menjadi elemen halimunan, seperti aa10456d3f1e87b8d9c04a7199a1173316b28748ea4df4d9c2150843fecfba68. Kelemahan pendekatan ini ialah ia memerlukan penambahan elemen tambahan pada HTML anda, yang boleh menjejaskan reka letak anda dan kebolehbacaan kod anda.

2. Gunakan atribut limpahan: Anda boleh menetapkan limpahan: auto atau limpahan: tersembunyi; Dengan cara ini, apabila elemen diapungkan, ia mencetuskan BFC (Konteks Pemformatan Blok), yang menghalang apungan daripada menjejaskan elemen induknya. Kelebihan pendekatan ini ialah ia tidak memerlukan penambahan elemen tambahan pada HTML, tetapi kelemahannya ialah ia boleh menjejaskan gaya lain (seperti pemaparan latar belakang dan sempadan).

3. Gunakan elemen pseudo clearfix: Elemen pseudo ialah elemen yang dicipta dalam CSS yang tidak memerlukan penambahan elemen tambahan pada HTML. Anda boleh menggunakan ::after atau ::before pseudo-elements untuk mengosongkan terapung. Berikut ialah contoh asas:

.clearfix::after {  
    content: "";  
    display: table;  
    clear: both;  
}

Apabila menggunakan kaedah ini, anda hanya perlu menambah kelas clearfix pada elemen induk yang perlu dibersihkan daripada terapung. Kelebihan pendekatan ini ialah ia tidak memerlukan penambahan elemen tambahan pada HTML, tetapi kelemahannya ialah ia boleh menjejaskan gaya lain (seperti pemaparan latar belakang dan sempadan).

4. Gunakan reka letak fleksibel: Reka letak fleksibel ialah kaedah reka letak CSS moden yang boleh mengendalikan susunan dan penjajaran elemen secara automatik. Anda boleh menetapkan elemen induk kepada susun atur fleksibel, supaya walaupun elemen di dalamnya terapung, saiz elemen induk tidak akan terjejas. Contohnya:

.parent {  
    display: flex;  
}

Apabila menggunakan kaedah ini, anda tidak perlu menambah elemen tambahan pada HTML, dan anda juga tidak perlu menggunakan sebarang helah untuk mengosongkan terapung. Tetapi harus diingat bahawa tidak semua pelayar menyokong susun atur fleksibel.

5. Gunakan reka letak grid: Reka letak grid ialah satu lagi kaedah reka letak CSS moden yang boleh mencipta reka letak dua dimensi yang kompleks. Seperti reka letak flex, anda boleh menetapkan elemen induk kepada susun atur grid, supaya walaupun elemen terapung, saiz elemen induk tidak akan terjejas. Contohnya:

.parent {  
    display: grid;  
}

Apabila menggunakan kaedah ini, anda tidak perlu menambah elemen tambahan pada HTML, dan anda juga tidak perlu menggunakan sebarang helah untuk mengosongkan terapung. Tetapi harus diingat bahawa tidak semua pelayar menyokong susun atur grid. Selain itu, susun atur grid lebih kompleks daripada susun atur flex, dan kawalan susun atur juga lebih halus.

Di atas adalah lima kaedah utama membersihkan terapung. Setiap kaedah mempunyai kelebihan dan kekurangannya, dan anda boleh memilih kaedah yang paling sesuai berdasarkan keperluan dan persekitaran khusus anda.

Atas ialah kandungan terperinci Apakah 5 cara untuk membersihkan terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!