Mengapung - Trik CSS

Anonim

The floatproperti di CSS digunakan untuk penentuan posisi dan tata letak pada halaman web.

.module ( float: left; )

Nilai

  • none: elemen tidak mengapung. Ini adalah nilai awal.
  • left: mengapung elemen di sebelah kiri wadahnya.
  • right: mengapung elemen di sebelah kanan wadahnya.
  • inherit: elemen mewarisi arah float dari induknya.
Catatan: Elemen yang diapungkan secara otomatis display: block;

Apa Arti Float?

Untuk memahami tujuan dan asal muasal float, kita dapat melihat ke desain cetak. Dalam tata letak cetak, gambar dapat diatur ke dalam halaman sehingga teks membungkusnya sesuai kebutuhan. Ini biasanya dan tepat disebut "bungkus teks". Ini adalah contohnya.

Dalam program tata letak halaman, kotak yang menampung teks dapat diberitahu untuk menghormati bungkus teks, atau untuk mengabaikannya. Mengabaikan bungkus teks akan memungkinkan kata-kata mengalir tepat di atas gambar seolah-olah tidak ada di sana. Inilah perbedaan antara gambar yang menjadi bagian dari alur halaman (atau bukan). Desain web sangat mirip.

Dalam desain web, elemen halaman dengan floatproperti CSS yang diterapkan padanya sama seperti gambar dalam tata letak cetak di mana teks mengalir di sekitarnya. Elemen mengambang tetap menjadi bagian dari aliran halaman web. Ini sangat berbeda dari elemen halaman yang menggunakan pemosisian absolut. Elemen halaman yang benar-benar diposisikan dihapus dari aliran halaman web, seperti ketika kotak teks di tata letak cetak diberitahu untuk mengabaikan bungkus halaman. Elemen halaman yang diposisikan sepenuhnya tidak akan memengaruhi posisi elemen lain, dan elemen lain tidak akan memengaruhi mereka, baik bersentuhan atau tidak.

Demo

Demo ini menampilkan artikel dengan dua gambar: satu disetel ke float: left, dan satu disetel ke float: right. Tekan tombol "toggle floats" untuk mengaktifkan dan menonaktifkan float.

Lihat Contoh Pen Float oleh CSS-Tricks (@ css-trick) di CodePen.

Floats untuk Tata Letak

Selain dari contoh sederhana membungkus teks di sekitar gambar, float dapat digunakan untuk membuat tata letak web secara keseluruhan .

Float juga berguna untuk tata letak dalam kasus yang lebih kecil. Ambil contoh area kecil dari sebuah halaman web ini. Jika kita menggunakan floatuntuk gambar avatar kita, ketika gambar itu berubah ukuran, teks di dalam kotak akan mengalir ulang untuk menampungnya:

Tata letak yang sama ini dapat dicapai dengan menggunakan pemosisian relatif pada penampung dan pemosisian absolut pada avatar juga. Namun, jika dilakukan dengan cara itu, teks tidak akan terpengaruh oleh avatar, dan tidak dapat dialirkan ulang pada perubahan ukuran.

Demo

Demo ini menampilkan avatar dengan float: leftterapan. Tekan tombol "toggle image size" untuk melihat versi yang lebih luas dari gambar avatar. Perhatikan bahwa teks mengalir ulang untuk mengakomodasi gambar alih-alih berjalan di atas gambar.

Lihat Demo Pen Float oleh CSS-Tricks (@ css-trick) di CodePen.

Membersihkan Float

Properti saudara perempuan Float adalah clear. Elemen yang memiliki clearset properti di atasnya tidak akan bergerak ke atas yang berdekatan dengan pelampung seperti yang diinginkan pelampung, tetapi akan bergerak sendiri ke bawah melewati pelampung. Sekali lagi ilustrasi lebih bermanfaat daripada kata-kata:

Pada contoh di atas, sidebar diapungkan ke kanan dan lebih pendek dari area konten utama. Footer kemudian diminta untuk melompat ke ruang yang tersedia seperti yang diminta oleh pelampung. Untuk memperbaiki masalah ini, footer dapat dikosongkan untuk memastikannya tetap di bawah kedua kolom yang mengambang.

#footer ( clear: both; )

Clear juga memiliki empat nilai yang valid. Nilai bothini paling umum digunakan, yang membersihkan pelampung yang datang dari kedua arah. Nilai leftdan rightdapat digunakan untuk hanya membersihkan float dari satu arah. Nilai awal adalah none, yang biasanya tidak diperlukan kecuali digunakan untuk secara eksplisit menghapus clearnilai yang telah ditetapkan. Nilai tersebut inheritmembuat elemen mewarisi nilai induknya clear. Anehnya, Internet Explorer tidak mendukung nilai ini hingga IE8.

Membersihkan hanya leftatau rightmengapung, meskipun jarang terlihat di alam liar, pasti ada gunanya.

Keruntuhan Besar

Salah satu hal yang lebih membingungkan tentang bekerja dengan float adalah bagaimana mereka dapat memengaruhi elemen yang berisi float (elemen "induk" mereka). Jika elemen induk hanya berisi elemen mengambang, tingginya akan menciut. Ini tidak selalu jelas jika induknya tidak memiliki latar belakang yang terlihat secara visual, tetapi penting untuk diperhatikan.

Meski tampak berlawanan dengan intuisi, alternatifnya lebih buruk. Pertimbangkan skenario ini:

Jika elemen blok di atas secara otomatis diperluas untuk mengakomodasi elemen mengambang, kita akan memiliki jeda spasi yang tidak wajar dalam aliran teks antar paragraf, tanpa cara praktis untuk memperbaikinya. Jika ini masalahnya, kami desainer akan mengeluh jauh lebih keras tentang perilaku ini daripada yang kami lakukan tentang runtuh.

Menciutkan hampir selalu perlu ditangani untuk mencegah masalah tata letak dan lintas browser yang aneh. Kami memperbaikinya dengan membersihkan pelampung setelah elemen mengambang di wadah tetapi sebelum penutupan wadah.

Teknik Kliring Floats

Jika Anda berada dalam situasi di mana Anda selalu tahu apa elemen suksesnya, Anda dapat menerapkan clear: both;nilai pada elemen itu dan menjalankan bisnis Anda. Ini sangat ideal karena tidak memerlukan peretasan mewah dan tidak ada elemen tambahan yang membuatnya menjadi semantik sempurna. Tentu saja hal-hal biasanya tidak berjalan seperti itu dan kami perlu memiliki lebih banyak alat pembersih apung di kotak peralatan kami.

  • Metode Empty Div , secara harfiah, adalah div kosong. . Terkadang Anda akan melihat
    elemen atau beberapa elemen acak lainnya yang digunakan, tetapi div adalah yang paling umum karena tidak memiliki gaya default browser, tidak memiliki fungsi khusus, dan tidak mungkin ditata secara umum dengan CSS. Metode ini dicemooh oleh para puritan semantik karena tidak memiliki makna kontekstual pada halaman dan hanya ada untuk presentasi. Tentu saja, dalam arti yang paling sempit, mereka benar. Tapi, itu menyelesaikan pekerjaan dan tidak menyakiti siapa pun.
  • Metode Overflow bergantung pada pengaturan overflowproperti CSS pada elemen induk. Jika properti ini disetel ke autoatau hiddenpada elemen induk, induk akan diperluas untuk memuat pelampung, secara efektif membersihkannya untuk elemen berikutnya. Metode ini bisa menjadi semantik yang indah karena mungkin tidak memerlukan elemen tambahan. Namun, jika Anda menemukan diri Anda menambahkan yang baru divhanya untuk menerapkan ini, itu sama tidak semantiknya dengan divmetode kosong , dan kurang bisa beradaptasi. Juga perlu diingat bahwa properti overflow tidak secara khusus untuk membersihkan float. Berhati-hatilah untuk tidak menyembunyikan konten atau memicu scrollbar yang tidak diinginkan.
  • Metode Penghapusan Mudah (atau dikenal sebagai "clearfix") menggunakan pemilih semu CSS ( :after) yang cerdas untuk membersihkan float. Daripada menyetel overflow pada induk, Anda menerapkan kelas tambahan seperti "clearfix" untuk itu. Kemudian terapkan CSS ini: 
    .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

    Ini akan menerapkan sedikit konten, tersembunyi dari tampilan, setelah elemen induk yang membersihkan float. Ini bukan keseluruhan cerita, karena kode tambahan perlu digunakan untuk mengakomodasi browser lama. Catatan: Juga lihat cuplikan ini yang melacak yang terbaru dan terbaik di clearfix, termasuk "micro clearfix" yang lebih baru.

Skenario yang berbeda membutuhkan metode pembersihan float yang berbeda. Ambil contoh kisi balok, masing-masing dari jenis yang berbeda.

Untuk menghubungkan blok serupa secara visual dengan lebih baik, kami ingin memulai baris baru sesuka kami, dalam hal ini ketika warnanya berubah. Kita dapat menggunakan metode overflow atau pembersihan mudah jika masing-masing kelompok warna memiliki elemen induk. Atau, kami menggunakan metode div kosong di antara setiap grup. Tiga div pembungkus yang sebelumnya tidak ada atau tiga div setelah yang sebelumnya tidak ada. Saya akan membiarkan Anda memutuskan mana yang lebih baik.

Masalah dengan Float

Floats sering dikalahkan karena rapuh. Mayoritas kerapuhan ini berasal dari bug di IE6 dan IE7. Saat browser tersebut memudar ke masa lalu, bug ini ikut memudar. Tapi, masih ada gunanya memahaminya jika Anda perlu men-debug "OldIE".

  • Pushdown adalah gejala elemen di dalam item melayang yang lebih lebar dari float itu sendiri (biasanya gambar). Sebagian besar browser akan merender gambar di luar float, tetapi tidak ada bagian yang menonjol yang memengaruhi tata letak lainnya. Versi lama IE memperluas float untuk memuat gambar, sering kali memengaruhi tata letak secara drastis. Contoh umum adalah gambar yang mencuat dari konten utama mendorong sidebar ke bawah.

    Perbaikan cepat: Pastikan Anda tidak memiliki gambar yang melakukan ini, gunakan overflow: hidden;untuk memotong kelebihan.

  • Double Margin Bug - Hal lain yang perlu diingat ketika berhadapan dengan IE 6 adalah jika Anda menerapkan margin ke arah yang sama dengan float, margin tersebut akan berlipat ganda. Perbaikan cepat: atur display: inlinepada float, dan jangan khawatir itu akan tetap menjadi elemen level blok.
  • The 3px Jog adalah ketika teks yang di samping elemen melayang secara misterius ditendang pergi oleh 3px seperti forcefield yang aneh di sekitar mengapung. Perbaikan cepat: atur lebar atau tinggi pada teks yang terpengaruh.
  • Di IE 7, Bug Margin Bawah adalah ketika jika orang tua yang mengapung telah mengapung anak-anak di dalamnya, margin bawah pada anak-anak itu diabaikan oleh orang tua. Perbaikan cepat: menggunakan bantalan bawah pada induknya.

Alternatif

Jika Anda membutuhkan teks yang membungkus gambar, sebenarnya tidak ada alternatif untuk float. Ngomong-ngomong, lihat teknik yang agak pintar ini untuk membungkus teks di sekitar bentuk tidak beraturan. Tapi untuk tata letak halaman pasti ada pilihannya. Eric Sol memiliki artikel tentang A List Apart, Faux Absolute Positioning, yang menjelaskan teknik yang sangat menarik yang dalam banyak hal menggabungkan fleksibilitas pelampung dengan kekuatan pemosisian absolut.

CSS3 menangani tata letak halaman dengan beberapa cara:

  • Flexbox
  • Tata Letak Multi-kolom
  • Tata Letak Kisi

Pelampung yang diposisikan secara mutlak (misalnya Anda benar-benar memposisikannya seperti biasa, tetapi elemen tersebut masih dapat memengaruhi elemen lain, seperti memiliki teks yang membungkusnya) telah dibahas, tetapi saya pikir gagasan itu disimpan karena kesamaan dengan gagasan tata letak lain yang lebih kuat.

Video

Saya melakukan screencast beberapa waktu lalu menjelaskan banyak dari konsep float ini.

Terkait

  • clear
  • position

Informasi Lebih Lanjut

  • float di spesifikasi W3C
  • float di MDN

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Semua Semua Semua Semua Semua Semua Semua