Pelampung CSS Dijelaskan Dengan Menunggang Escalator

Jika anda pernah melompat di eskalator, maka anda dapat dengan cepat memahami terapung.

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

Perkara seterusnya yang anda tahu, unsur-unsur baru anda melompat keluar dari pesanan anda yang dipilih dengan teliti, dan berpegang pada bahagian div anda seperti magnet. Ungkapan "tingkah laku yang tidak diingini" datang kepada fikiran.

Saya menghabiskan masa berjam-jam untuk memahami sepenuhnya terapung. Saya akan membaca artikel dan berkata, "Oh, ini masuk akal!" Kemudian saya akan kembali ke kod saya, mencubanya dan ... gagal. Kembali ke papan lukisan.

Saya akan melakukan yang terbaik untuk melepaskan anda nasib ini.

Terapung membuat aliran ganti. Ini adalah bahagian yang paling sukar difahami. Dan sebaik sahaja anda memperkenalkannya, anda perlu menulis kod anda supaya ia menyumbang sehingga tiga aliran: normal, kiri dan kanan. Ini adalah satu set peraturan baru, berbanding dengan memanipulasi lebar elemen atau kedudukan mereka.

Sebenarnya, terapung sangat mirip dengan dinamik menaiki eskalator, dan saya akan menunjukkan bagaimana mereka boleh digunakan bersama dengan harta yang jelas untuk mewujudkan hubungan yang jelas di dalam divs. Dengan cara ini, kali berikutnya anda cuba menggunakan terapung dalam kod anda, anda tidak akan menghadapi sebarang kejutan.

Harus menghormati laluan lulus

Aliran lalai elemen adalah seperti gambar di atas. Sesetengah lelaki berdiri di tengah-tengah dengan tangannya di pagar. Dia memonopoli seluruh eskalator. Tiada siapa yang boleh melaluinya. Etika eskalator yang cukup miskin, benar-benar.

Dia berdiri di belakang sekumpulan orang lain yang melakukan perkara yang sama, jadi tiada siapa yang boleh menyampaikannya. Tiada konsep lorong atau kesopanan asas manusia.

Ini adalah senario apabila anda tidak menggunakan terapung sama sekali.

Baiklah, sekarang kita bercakap! Orang yang menunjukkan tahap kesedaran. Suka melihatnya.

Kami mempunyai satu lorong yang terbentuk di sebelah kiri, dan lorong lain terbentuk di sebelah kanan. Orang lain dengan mudah boleh bergerak di sekitar dua orang yang berdiri diam dan berjalan eskalator lebih cepat, jika mereka mahu. Tiada siapa menghalang aliran dengan berdiri di tengah-tengah.

Inilah senario apabila anda menggunakan terapung dalam div anda. Terdapat aliran kiri dan aliran yang betul, dan unsur-unsur yang tidak terapung dapat dengan mudah mengisi ruang yang tidak diambil oleh elemen yang terapung.

Terapung: Kiri dan Kanan

Menggunakan terapung boleh memperkenalkan sehingga dua aliran baru: kiri dan kanan.

Dan ini membolehkan aliran normal unsur-unsur, mereka tanpa nilai apungan, untuk mengisi ruang di sekitar unsur-unsur ini.

Terapung membolehkan anda membuat hubungan baru di antara aliran.

Jika anda mempunyai satu barisan orang yang berdiri di tengah-tengah lif, anda akan mempunyai pilihan terhad untuk struktur baru. Tetapi apabila anda mempunyai lajur kiri dan kanan, tiba-tiba anda boleh menentukan bahawa orang-orang tertentu berdiri di sebelah kanan, yang lain tinggal kiri, dan kumpulan lain boleh mengisi jurang.

Ini membolehkan anda membuat kod yang lebih mudah dibaca dan difahami, kerana harta apungan juga memberi petunjuk tentang hubungan elemen dengan unsur-unsur sekitarnya.

Harta Hitam

Terdapat satu lagi kedutan yang belum kita bahas: harta yang jelas. "Kosongkan" membolehkan elemen untuk menentukan di mana mereka harus menyelaraskan berbanding unsur-unsur yang terapung.

Dalam gambar pertama seksyen "Terapung", kedua-dua pelumba eskalator berdiri tegak di setiap sisi eskalator. Ini membolehkan orang lain untuk melepasi mereka dan bergerak dengan bebas seperti yang mereka mahu.

Katakan bahawa bukannya mempunyai elemen kiri yang terapung dan satu elemen yang terapung, kami sebaliknya mempunyai 3 elemen kiri yang terapung dan 1 di sebelah kanan. Tiga elemen kiri terapung akan disusun dalam satu baris di sebelah kiri jika kami juga memberi mereka "jelas: kiri" harta. Tetapi jika mereka melintang dengan elemen kanan yang terapung, dapat membuatnya sangat sulit atau bahkan tidak mungkin untuk aliran normal elemen untuk dilalui:

"Kosongkan: kiri" memberitahu setiap orang terapung kiri bahawa mereka harus menyelaraskan diri mereka di belakang elemen pertama yang terapung kiri. Bergantung kepada saiz dua orang bawah, ia boleh mencabar untuk mana-mana elemen biasa untuk memerah dan menduduki ruang di bahagian atas kanan. Oleh itu, amalan eskalator yang baik masih boleh menyebabkan penyumbatan.

Salah satu kegunaan paling jelas dari harta yang jelas adalah "jelas: kedua-duanya". Ini membolehkan anda menetapkan semula aliran unsur, berbanding dengan terus mengekalkan aliran yang betul, kiri dan normal. Ia seperti lelaki itu di eskalator yang mengambil seluruh ruang kerana dia membawa kopernya.

Dengan "jelas: kedua-duanya", tidak kira di mana lelaki itu berada dalam orientasi pada kopernya. Tidak kira siapa yang berdiri kiri atau kanan di atasnya. Dia masih menghalang seluruh eskalator. Orang yang mengikuti selepasnya perlu memulakan aliran baru unsur-unsur, yang boleh termasuk mana-mana tiga aliran: kiri, kanan, atau normal.

Dia telah melarikan diri dari sistem tiga aliran dan menetapkan semula peraturan. Bad bagi orang yang mahu melepaskan eskalator? Pasti. Tetapi ia baik jika anda mahu menghentikan sesiapa sahaja dari lulus.

Perhatikan bagaimana ini berbeza dengan seorang lelaki pada mulanya yang berdiri di tengah eskalator, di belakang garis orang yang melakukan hal yang sama. Itulah sistem satu aliran. "Jelas: kedua-duanya" mengakui bahawa mungkin terdapat tiga aliran, dan menghalang laluan unsur mana-mana yang berikut.

Jika anda menikmati post ini, anda juga boleh menikmati penjelasan saya yang lain tentang topik CSS dan JavaScript yang mencabar, seperti kedudukan, Model-View-Controller, dan panggilan balik.

Dan jika anda fikir ini mungkin membantu orang lain dalam kedudukan yang sama seperti anda, berikannya "hati"!

Jawatan ini pada mulanya muncul di blog CodeAnalogies.