Pelampung CSS Dijelaskan dalam 5 Soalan

CSS "Floats" (unsur terapung) mudah digunakan tetapi sekali digunakan, kesannya terhadap unsur-unsur di sekelilingnya terkadang tidak dapat diramalkan. Jika anda pernah menemui masalah menghilangkan unsur-unsur berdekatan atau terapung yang mencucuk seperti ibu jari, jangan risau lagi.

Jawatan ini merangkumi lima soalan asas yang akan membantu anda menjadi pakar di unsur terapung.

1. Unsur-unsur yang tidak terapung?
2. Apa yang berlaku kepada elemen apabila ia terapung?
3. Apa yang berlaku kepada adik-beradik "Terapung"?
4. Apa yang berlaku kepada ibu bapa "Terapung"?
5. Bagaimana anda membersihkan "Terapung"?

Bagi pembaca yang menambah pendekatan TL; dr pendekatan kepada kehidupan, ada ringkasan berhampiran hujung jawatan.

1. Elemen mana yang tidak terapung?

An mutlak atau elemen kedudukan tetap tidak akan terapung. Jadi pada kali seterusnya anda mengalami float yang tidak berfungsi, periksa apakah ia masuk kedudukan: mutlak atau kedudukan: tetap dan memohon perubahan sewajarnya.

2. Apa yang berlaku kepada elemen apabila ia terapung?

Apabila elemen diberi tag "float" ia berjalan ke kiri atau kanan pada dasarnya sehingga ia memukul dinding elemen bekasnya. Sebagai alternatif, ia akan berjalan sehingga ia memukul elemen terapung lain yang telah memukul dinding yang sama. Mereka akan terus menumpuk bersebelahan sehingga ruang habis, dan yang baru masuk akan dipindahkan ke bawah.

Elemen terapung juga tidak akan melebihi unsur-unsur sebelum ini ia dalam kod, sesuatu yang perlu anda pertimbangkan sebelum pengekodan a “Terapung” selepas elemen ke sisi yang anda mahu terapung.

Berikut adalah dua lagi perkara yang berlaku kepada elemen terapung bergantung kepada jenis elemen yang sedang terapung:

(1) Unsur dalam baris akan berubah menjadi elemen peringkat blok apabila terapung.

Pernah tertanya-tanya kenapa tiba-tiba anda dapat memberikan ketinggian & lebar kepada terapung span? Itu kerana semua elemen apabila terapung akan mendapat nilai blok untuknya paparan atribut (jadual dalam talian akan mendapatkan jadual) menjadikan mereka menghalang unsur-unsur tahap.

(2) Unsur blok lebar yang tidak ditentukan akan menyusut agar muat kandungannya apabila terapung.

Biasanya, apabila anda tidak menentukan lebar kepada elemen blok, lebarnya adalah 100% lalai. Tetapi apabila terapung, itu tidak lebih daripada itu; kotak elemen blok akan menyusut sehingga kandungannya tetap kelihatan.

3. Apa yang berlaku kepada adik-beradik "mengapung"?

Apabila anda memutuskan untuk mengapungkan unsur di antara sekumpulan elemen jangan risau tentang bagaimana ia akan berkelakuan, tingkah lakunya akan diramalkan dan sama ada bergerak ke kiri atau kanan. Apa yang anda fikirkan sebenarnya adalah bagaimana adik-beradik selepas itu akan berkelakuan.

"Mengapung" mempunyai saudara kandung yang paling penyayang dan taat di seluruh dunia. Mereka akan melakukan segala-galanya untuk menampung elemen terapung.

The teks dan elemen dalam baris akan semata-mata buat jalan untuk "Terap" dan akan mengelilingi "Terapung" apabila ia berada dalam kedudukan.

The blok elemen akan melangkah lebih jauh dan akan bungkus diri di sekeliling "Float" dengan murah hati, walaupun itu bermakna menendang elemen anak mereka sendiri untuk membuat ruang untuk "Terapung".

Mari periksa ini dalam eksperimen. Berikut adalah kotak biru dan selepas itu kotak merah saiz yang sama dengan beberapa unsur kanak-kanak.

Sekarang, mari kita terapung kotak biru, dan lihat apa yang berlaku pada kotak merah dan anak-anaknya.

Segala-galanya akan baik sekali apabila kotak merah berhenti memeluk kotak biru dan untuk itu anda boleh gunakan melimpah: tersembunyi.

Apabila anda menambah melimpah: tersembunyi kepada elemen yang telah membungkus apungan, ia akan berhenti berbuat demikian. Lihat di bawah bagaimana kotak merah berkelakuan melimpah: tersembunyi.

4. Apa yang berlaku kepada ibu bapa "Terapung"?

Ibu bapa tidak peduli dengan anak-anak mereka "Terapung", kecuali mereka tidak boleh keluar dari sempadan kiri atau kanan mereka.

Biasanya elemen blok ketinggian yang tidak ditentukan meningkatkan ketinggiannya untuk menampung unsur anaknya, tetapi itu bukanlah kes bagi kanak-kanak "Terap". Sekiranya saiz "Float" meningkat, ibu bapa tidak akan meningkatkan ketinggiannya dengan sewajarnya. Ini sekali lagi boleh diselesaikan dengan menggunakan melimpah: tersembunyi dalam ibu bapa.

5. Bagaimana untuk membersihkan "Terapung"?

Saya telah menyebut dengan menggunakan melimpah: tersembunyi untuk membuat ketinggian orang tua-bijak menampung anak terapung semasa mencipta ruang yang sesuai untuk elemen lain selepas "Terapung" dan menghentikan adik-beradik dari membungkus "Terapung.

Dan itulah cara anda membuat elemen hidup berhampiran "Float" tanpa kompromi.

Terdapat kaedah lain di mana unsur-unsur tidak akan berada di mana-mana berhampiran saudara-saudara "Float" mereka. Dengan menggunakan jelas atribut anda boleh membuat elemen bebas daripada berada di dekat "Float".

jelas: kiri; jelas: betul; jelas: kedua-duanya; 

ditinggalkan nilai membersihkan semua "Terapung" di sebelah kiri elemen, dan sebaliknya betul, dan di kedua-dua belah pihak kedua-duanya. Ini jelas atribut boleh digunakan pada adik-beradik, div kosong atau pada elemen pseudo sesuai dengan mudah anda.

Ringkasan

1. Unsur-unsur Mutlak / Tetap tidak akan terapung.
2. A "Float" tidak pergi di atas elemen sebelum ini ia dalam kod.
3. Sekiranya tidak ada ruang yang cukup di dalam bekas, "Float" akan ditolak.
4. Semua "Terapung" dibuat ke dalam unsur-unsur tahap blok.
5. Jika lebar tidak ditentukan pada "Float", ia akan menyusut untuk muat kandungannya.
6. Saudara kandung kemudian "Float" akan mengelilingi mereka (inline & text) atau membungkusnya (blok).
7. Untuk menghentikan elemen daripada membungkus "Terapung", gunakan melimpah: tersembunyi.
8. Ibu bapa dari "Terapung" tidak akan meningkatkan ketinggiannya agar sesuai dengan terapung.
9. Untuk membuat ibu bapa meningkatkan ketinggiannya seperti "Terapung", gunakan melimpah: tersembunyi (atau buat adik perempuan kosong dengan jelas selepas itu)
10. Untuk mengelakkan unsur yang berhampiran dengan mana-mana "Terapung" gunakan jelas atribut.