CSS Floats Dijelaskan dalam 5 Pertanyaan

CSS "Mengapung" (elemen mengambang) mudah digunakan tetapi sekali digunakan, efeknya terhadap elemen di sekitarnya terkadang tidak dapat diprediksi. Jika Anda pernah menemukan masalah hilangnya elemen di dekatnya atau mengapung yang menyembul seperti ibu jari yang sakit, jangan khawatir lagi.

Posting ini mencakup lima pertanyaan dasar yang akan membantu Anda menjadi ahli elemen mengambang.

1. Elemen mana yang tidak mengapung?
2. Apa yang terjadi pada suatu elemen ketika mengapung?
3. Apa yang terjadi pada saudara kandung "Mengapung"?
4. Apa yang terjadi pada orang tua dari "Float"?
5. Bagaimana Anda menghapus "Floats"?

Bagi pembaca yang menambahkan pendekatan TL; dr untuk kehidupan, ada ringkasan di dekat akhir posting.

1. Elemen mana yang tidak mengambang?

Sebuah mutlak atau elemen posisi tetap tidak akan mengambang. Jadi lain kali Anda menemukan pelampung yang tidak berfungsi, periksa apakah float posisi: absolut atau posisi: diperbaiki dan menerapkan perubahan yang sesuai.

2. Apa yang terjadi pada suatu elemen ketika mengapung?

Ketika sebuah elemen ditandai "mengambang", ia berjalan ke kiri atau ke kanan pada dasarnya sampai elemen itu menabrak dinding elemen wadahnya. Atau, itu akan berjalan sampai itu hits elemen mengambang lain yang telah menabrak dinding yang sama. Mereka akan terus menumpuk berdampingan sampai ruang habis, dan yang masuk yang baru akan dipindahkan ke bawah.

Elemen mengambang juga tidak akan melampaui elemen sebelum saya t dalam kode, sesuatu yang perlu Anda pertimbangkan sebelum pengkodean a “Mengapung” setelah elemen ke sisi yang ingin Anda apungkan.

Berikut adalah dua hal lagi yang terjadi pada elemen mengambang tergantung pada jenis elemen apa yang disimpan mengambang:

(1) Elemen inline akan berubah menjadi elemen level blok ketika melayang.

Pernah bertanya-tanya mengapa tiba-tiba Anda dapat menetapkan tinggi & lebar untuk mengambang menjangkau? Itu karena semua elemen saat melayang akan mendapatkan nilai blok untuk itu tampilan atribut (tabel inline akan mendapatkan meja) membuatnya memblokir elemen level.

(2) Elemen blok dengan lebar yang tidak ditentukan akan menyusut agar sesuai dengan isinya saat melayang.

Biasanya, ketika Anda tidak menentukan lebar untuk elemen blok, lebarnya adalah 100% default. Tetapi ketika melayang, itu tidak terjadi lagi; kotak elemen blok akan menyusut sampai isinya tetap terlihat.

3. Apa yang terjadi pada The Siblings of "Floats"?

Ketika Anda memutuskan untuk mengapung elemen di antara sekelompok elemen jangan khawatir tentang bagaimana itu akan berperilaku, perilakunya akan dapat diprediksi dan akan bergerak ke kiri atau kanan. Apa yang seharusnya Anda pikirkan adalah bagaimana saudara kandung setelah itu akan berperilaku.

"Mengapung" memiliki saudara kandung yang paling peduli dan taat di seluruh dunia. Mereka akan melakukan segalanya dengan kekuatan mereka untuk mengakomodasi elemen mengambang.

Itu elemen teks dan inline hanya akan memberi jalan bagi "Mengapung" dan akan mengelilingi "Mengapung" ketika itu dalam posisi.

Itu elemen blok akan melangkah lebih jauh dan akan membungkus diri mereka di sekitar "Float" murah hati, bahkan jika itu berarti mengeluarkan elemen anak mereka sendiri untuk memberikan ruang bagi "Float".

Mari kita periksa ini dalam percobaan. Di bawah ini adalah kotak biru dan setelah itu adalah kotak merah dengan ukuran yang sama dengan beberapa elemen anak.

Sekarang, mari apungkan kotak biru, dan lihat apa yang terjadi pada kotak merah dan anak-anaknya.

Semuanya akan baik-baik saja setelah kotak merah berhenti merangkul kotak biru dan untuk itu Anda dapat menggunakannya overflow: disembunyikan.

Ketika Anda menambahkan overflow: disembunyikan ke elemen yang telah membungkus float, itu akan berhenti melakukannya. Lihat di bawah ini bagaimana kotak merah berperilaku overflow: disembunyikan.

4. Apa yang terjadi pada orang tua dari "Float"?

Orang tua tidak terlalu memedulikan anak-anak "Float" mereka, kecuali bahwa mereka tidak boleh keluar dari batas kiri atau kanan mereka.

Biasanya elemen blok ketinggian yang tidak ditentukan menambah tinggi untuk mengakomodasi elemen anaknya, tetapi itu tidak berlaku untuk anak-anak "Float". Jika ukuran "Float" bertambah, induknya tidak akan menambah tinggi sesuai. Ini lagi dapat diselesaikan dengan menggunakan overflow: disembunyikan di orangtua.

5. Cara menghapus "Mengapung"?

Saya sudah menyebutkan menggunakan overflow: disembunyikan untuk membuat orang tua yang tinggi mengakomodasi anak yang mengambang sambil menciptakan ruang yang tepat untuk elemen lain setelah "Float" dan untuk menghentikan saudara kandung dari pembungkus "Floats.

Dan itulah bagaimana Anda membuat elemen tinggal di dekat "Float" tanpa kompromi.

Ada metode lain di mana elemen-elemen bahkan tidak akan berada di dekat saudara "Float" mereka. Dengan menggunakan bersih atribut Anda dapat membuat elemen bebas dari dekat "Float".

jelas: kiri; jelas: benar; jelas: keduanya; 

kiri nilai menghapus semua "Mengapung" di sebelah kiri elemen, dan sebaliknya untuk kanan, dan di kedua sisi untuk kedua. Ini bersih atribut dapat digunakan pada saudara kandung, div kosong atau pada elemen semu sesuai kenyamanan Anda.

Ringkasan

1. Elemen absolut / Tetap tidak akan mengambang.
2. "Float" tidak melebihi elemen sebelum itu dalam kode.
3. Jika tidak ada ruang yang cukup di wadah, "Float" akan didorong ke bawah.
4. Semua "Mengapung" dibuat menjadi elemen tingkat blok.
5. Jika lebar tidak ditentukan pada "Float", itu akan menyusut agar sesuai dengan konten.
6. Saudara kandung selanjutnya dari "Float" akan mengelilinginya (sebaris & teks) atau membungkusnya (blok).
7. Untuk menghentikan suatu elemen dari pembungkus "Float", gunakan overflow: disembunyikan.
8. Orang tua dari "Float" tidak akan menambah tinggi badannya agar sesuai dengan float.
9. Untuk membuat orang tua menambah tinggi badan sesuai "Float", gunakan overflow: disembunyikan (atau buat saudara yang kosong dengan bersih setelah itu)
10. Untuk mencegah elemen berada di dekat "Float" apa pun gunakan bersih atribut.