CSS Mengapung Dijelaskan Dengan Mengendarai Eskalator

Jika Anda pernah melompati eskalator, maka Anda dapat dengan cepat memahami pelampung.

Anda hampir sempurna. Anda memutuskan untuk memperkenalkan beberapa pelampung untuk memperbaiki hubungan antara beberapa elemen.

Hal berikutnya yang Anda tahu, elemen-elemen Anda yang baru melayang melompat keluar dari urutan yang Anda pilih dengan hati-hati, dan menempel pada sisi div Anda seperti magnet. Ungkapan "perilaku yang tidak disengaja" muncul di pikiran.

Saya pribadi telah menghabiskan waktu berjam-jam untuk mencoba sepenuhnya memahami kendaraan hias. Saya membaca sebuah artikel dan berkata, "Oh, ini masuk akal!" Kemudian saya kembali ke kode saya, mencobanya dan ... gagal. Kembali ke papan gambar.

Saya akan melakukan yang terbaik untuk menghindarkan Anda dari nasib ini.

Mengapung menciptakan aliran alternatif. Ini adalah bagian tersulit untuk dipahami. Dan begitu Anda mengenalkannya, Anda kemudian perlu menulis kode Anda sehingga bisa memuat hingga tiga aliran: normal, kiri dan kanan. Ini adalah seperangkat aturan baru, yang bertentangan dengan memanipulasi lebar elemen atau pemosisiannya.

Sebenarnya, mengapung sangat mirip dengan dinamika mengendarai eskalator, dan saya akan menunjukkan bagaimana mereka dapat digunakan di samping properti yang jelas untuk menciptakan hubungan yang sejernih kristal dalam div. Dengan cara ini, saat berikutnya Anda mencoba menggunakan pelampung dalam kode Anda, Anda tidak akan menemukan kejutan.

Harus menghormati jalur pas

Alur elemen default adalah seperti gambar di atas. Seorang pria berdiri di tengah dengan tangannya di pagar. Dia memonopoli seluruh eskalator. Tidak ada yang bisa melewatinya. Etika eskalator yang sangat buruk, sungguh.

Dia berdiri di belakang sekelompok orang lain yang melakukan hal yang sama, jadi tidak ada yang bisa melewatinya juga. Tidak ada konsep jalur atau kesopanan dasar manusia.

Ini adalah skenario ketika Anda tidak menggunakan pelampung sama sekali.

Baiklah, sekarang kita bicara! Orang-orang menunjukkan tingkat kesadaran. Senang melihat itu.

Kami memiliki satu jalur yang terbentuk di sebelah kiri, dan jalur lain yang terbentuk di sebelah kanan. Orang lain dapat dengan mudah bergerak di sekitar dua orang yang berdiri diam dan berjalan di eskalator lebih cepat, jika mereka mau. Tidak ada yang menghalangi aliran dengan berdiri di tengah.

Ini adalah skenario ketika Anda menggunakan pelampung di div Anda. Ada aliran kiri dan aliran kanan, dan elemen-elemen yang tidak melayang dapat dengan mudah mengisi ruang yang tidak diambil oleh elemen melayang.

Mengapung: Kiri dan Kanan

Menggunakan pelampung dapat memperkenalkan hingga dua aliran baru: kiri dan kanan.

Dan ini memungkinkan aliran elemen normal, yang tanpa nilai float, untuk mengisi ruang di sekitar elemen ini.

Mengapung memungkinkan Anda untuk membuat hubungan baru antara aliran.

Jika Anda memiliki satu barisan orang yang berdiri di tengah lift, Anda akan memiliki pilihan terbatas untuk struktur baru. Tetapi ketika Anda memiliki kolom kiri dan kanan, tiba-tiba Anda dapat menentukan bahwa orang-orang tertentu berdiri di sebelah kanan, yang lain tetap di kiri, dan kelompok lain dapat mengisi kekosongan.

Ini memungkinkan Anda membuat kode yang lebih mudah dibaca dan dimengerti, karena properti float juga memberikan indikasi hubungan elemen dengan elemen sekitarnya.

Properti Yang Jelas

Ada satu lagi kerutan yang belum kita bahas: properti jelas. "Clear" memungkinkan elemen untuk menentukan di mana mereka harus menyelaraskan dibandingkan dengan elemen yang melayang.

Pada gambar pertama bagian "Mengapung", kedua pengendara eskalator berdiri dengan sopan di setiap sisi eskalator. Ini memungkinkan orang lain untuk melewatinya dan bergerak bebas sesuai keinginan mereka.

Katakanlah bahwa alih-alih memiliki satu elemen kiri yang melayang dan satu elemen kanan yang melayang, kita malah memiliki 3 elemen kiri yang melayang dan 1 di sebelah kanan. Tiga elemen kiri melayang akan menumpuk di garis di sebelah kiri jika kita juga memberi mereka properti "clear: left". Tetapi jika mereka secara horizontal sejajar dengan elemen kanan melayang, itu bisa membuatnya sangat sulit atau bahkan mustahil untuk dilewati oleh elemen normal:

“Clear: left” memberitahu setiap orang yang melayang ke kiri bahwa mereka harus menyelaraskan diri di belakang elemen pertama yang melayang ke kiri. Bergantung pada ukuran dua orang terbawah, bisa jadi merupakan tantangan bagi elemen normal mana pun untuk masuk dan menempati ruang di kanan atas. Jadi bahkan praktik eskalator yang baik masih dapat menyebabkan penyumbatan.

Salah satu penggunaan paling jelas dari properti clear adalah "clear: Keduanya". Ini memungkinkan Anda untuk mengatur ulang aliran elemen, bukan melanjutkan untuk mempertahankan aliran kanan, kiri dan normal. Ini seperti pria di eskalator yang mengambil seluruh ruang karena dia membawa kopernya.

Dengan "jelas: keduanya", tidak masalah di mana satu orang itu berdiri dalam orientasi ke kopernya. Tidak masalah siapa yang berdiri di kiri atau kanan di atasnya. Dia masih memblokir seluruh eskalator. Orang-orang yang mengejarnya perlu memulai aliran elemen baru, yang dapat mencakup salah satu dari ketiga aliran: kiri, kanan, atau normal.

Dia telah lolos dari sistem tiga aliran dan mengatur ulang aturan. Buruk untuk orang yang ingin menjalankan eskalator? Yakin. Tapi itu bagus jika Anda ingin menghentikan orang lain lewat.

Perhatikan bagaimana ini berbeda dari satu pria di awal yang berdiri di tengah eskalator, di belakang barisan orang yang melakukan hal yang sama. Itu adalah sistem satu aliran. "Jelas: keduanya" mengakui bahwa mungkin ada hingga tiga aliran, dan memblokir bagian dari setiap elemen yang mengikuti.

Jika Anda menikmati posting ini, Anda juga dapat menikmati penjelasan saya lainnya tentang topik CSS dan JavaScript yang menantang, seperti penentuan posisi, Model-View-Controller, dan panggilan balik.

Dan jika Anda berpikir ini mungkin membantu orang lain di posisi yang sama dengan Anda, berikan "hati"!

Posting ini awalnya muncul di blog CodeAnalogies.