Teknik Susun atur CSS - Susun Apung, Kosongkan dan Legasi: The Old School Cool

✨
Artikel ini adalah sebahagian daripada siri yang lebih besar yang tersedia di tapak web saya sendiri. Klik di sini untuk mengetahui lebih lanjut tentang CSS 101: The Series. Ianya percuma sepenuhnya!

Selamat datang ke ledakan dari masa lalu! Sebelum Flexbox dan Grid menyapu masuk seperti wira-wira reka bentuk web moden, ada masanya floats and clears menguasai alam CSS. Jika anda seorang pemula reka bentuk web, anda mungkin tertanya-tanya, "Apakah yang dimaksudkan dengan pelampung dan lusuh, dan mengapa saya perlu mengambil berat?" Baik, sandarkan diri, kerana kami akan melakukan perjalanan nostalgia melalui sejarah CSS.

Spoiler: anda mungkin temui beberapa helah hebat untuk digunakan hari ini!

Terapung: Penipu Reka Letak Asal

Bayangkan float sebagai remaja yang memberontak di dunia CSS - sentiasa keluar dari barisan dan menyebabkan sedikit huru-hara. Terapung pada asalnya direka untuk membungkus teks pada imej, tetapi pembangun yang bijak dengan cepat menyedari bahawa mereka boleh menggunakannya untuk membuat reka letak juga.

img {
    float: left;
    margin-right: 15px;
}

Dalam contoh di atas, terapung: kiri; menjadikan imej "terapung" ke kiri, membenarkan teks membungkusnya. Terapung ialah pilihan popular untuk mencipta reka letak berbilang lajur sebelum Flexbox dan Grid disertakan. Walau bagaimanapun, mereka boleh menjadi agak cerewet dan terdedah kepada masalah reka letak jika tidak digunakan dengan berhati-hati.

Clears: The Peacekeepers

Float mungkin agak memberontak, tetapi clear adalah pasukan pengaman mereka. Harta yang jelas adalah seperti pengantara yang bertindak untuk menyelesaikan huru-hara yang mungkin timbul. Jika anda menggunakan terapung dan mendapati bahawa elemen bertindih atau tidak berkelakuan seperti yang diharapkan, clear boleh membantu.

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

Dengan menambahkan kelas clearfix dengan CSS di atas, anda memastikan bahawa sebarang unsur terapung terkandung dalam bekas induknya. Ini adalah cara yang bagus untuk mengelakkan gangguan reka letak yang menjengkelkan di mana unsur kelihatan terapung ke dalam jurang.

Teknik Reka Letak Legasi: Kebangkitan Retro

Sebelum Flexbox dan Grid mencuri tumpuan, CSS mempunyai beberapa helah lagi. Berikut ialah beberapa teknik reka letak klasik:

• Blok Sebaris: Kaedah mudah untuk mencipta reka letak mendatar. Dengan menetapkan elemen untuk dipaparkan: inline-block;, anda boleh menyusunnya bersebelahan tanpa memerlukan pelampung.

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• Reka Letak Jadual: Ya, jadual bukan hanya untuk data jadual! Anda boleh menggunakan display: table;, display: table-row;, dan display: table-cell; untuk membuat susun atur seperti grid.

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

Kaedah ini sebahagian besarnya telah dibayangi oleh teknik reka letak moden tetapi masih menawarkan gambaran sekilas tentang evolusi reka bentuk web.

Aplikasi Zaman Moden: Mencampurkan Lama dan Baharu

Jadi, adakah floats and clears masih mendapat tempat dalam dunia reka bentuk web moden? Sudah tentu! Walaupun Flexbox dan Grid kini menjadi alat yang digunakan untuk membuat reka letak, apungan dan kosong masih boleh berguna dalam senario tertentu, seperti reka letak mudah atau semasa menggunakan kod lama.

Sebagai contoh, anda mungkin menggunakan terapung untuk pembalut teks atau apabila anda ingin menjajarkan sebilangan kecil elemen dengan cara yang mudah. Tetapi untuk reka letak yang kompleks dan responsif, Flexbox dan Grid ialah kawan terbaik anda.

Membungkusnya

Teknik reka letak lama, terapung, dan lain-lain mungkin kelihatan seperti peninggalan masa lalu, tetapi teknik ini adalah sebahagian daripada sejarah CSS yang kaya. Memahami mereka memberi anda asas yang kukuh dan membantu anda menghargai kuasa sistem susun atur moden. Selain itu, mengetahui helah lama ini boleh berguna apabila menangani projek lama atau cabaran reka bentuk yang unik (atau pusingan temu duga yang digeruni).

Selamat mengekod!

✨
Psst! Jika anda menyukai apa yang anda baca, anda harus klik di sini untuk menyemak CSS 101: The Series. Ianya percuma sepenuhnya!

Atas ialah kandungan terperinci Teknik Susun atur CSS - Susun Apung, Kosongkan dan Legasi: The Old School Cool. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!