Terapung - Trik CSS

The floatharta di CSS digunakan untuk kedudukan dan susun atur pada laman web.

.module ( float: left; )

Nilai

• none: elemen tidak melayang. Ini adalah nilai awal.
• left: mengapung elemen di sebelah kiri bekasnya.
• right: mengapung elemen di sebelah kanan bekasnya.
• inherit: elemen mewarisi arah apungan induknya.

Catatan: Elemen yang dilayang secara automatik display: block;

Apa maksud Float?

Untuk memahami tujuan dan asal usul float, kita boleh melihat reka bentuk cetak. Dalam susun atur cetakan, gambar boleh dimasukkan ke dalam halaman sehingga teks membungkus di sekitarnya jika diperlukan. Ini biasanya dan tepat disebut "bungkus teks". Inilah contohnya.

Dalam program tata letak halaman, kotak yang memegang teks dapat diberitahu untuk menghormati pembungkus teks, atau mengabaikannya. Mengabaikan pembungkus teks akan membolehkan kata-kata mengalir tepat di atas gambar seperti tidak ada di sana. Ini adalah perbezaan antara gambar yang menjadi bahagian aliran halaman (atau tidak). Reka bentuk web sangat serupa.

Dalam reka bentuk web, elemen halaman dengan sifat CSS yang floatditerapkan padanya sama seperti gambar dalam tata letak cetakan di mana teks mengalir di sekelilingnya. Elemen terapung tetap menjadi bahagian aliran halaman web. Ini berbeza dengan elemen halaman yang menggunakan kedudukan mutlak. Elemen halaman yang diposisikan sepenuhnya dikeluarkan dari aliran halaman web, seperti ketika kotak teks dalam tata letak cetak diberitahu untuk mengabaikan pembungkus halaman. Elemen halaman yang diposisikan sepenuhnya tidak akan mempengaruhi kedudukan elemen lain, dan elemen lain tidak akan mempengaruhi mereka, sama ada saling menyentuh atau tidak.

Demo

Demo ini menunjukkan artikel dengan dua gambar: satu set ke float: left, dan satu set ke float: right. Tekan butang "toggle floats" untuk mengaktifkan dan mengaktifkan float.

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

Terapung untuk Susun atur

Selain contoh ringkas membungkus teks di sekitar gambar, pelampung dapat digunakan untuk membuat susun atur keseluruhan web .

Float juga berguna untuk susun atur dalam keadaan yang lebih kecil. Ambil contoh kawasan kecil laman web ini. Sekiranya kita menggunakan floatgambar avatar kita, ketika gambar itu berubah ukuran teks di dalam kotak akan diubah suai untuk menampungnya:

Susun atur yang sama ini dapat dicapai dengan menggunakan kedudukan relatif pada wadah dan kedudukan mutlak pada avatar juga. Tetapi, apabila ia dilakukan dengan cara itu, teks tidak akan terpengaruh oleh avatar, dan tidak akan dapat mengubah suai perubahan pada ukuran.

Demo

Demo ini menunjukkan avatar dengan float: leftterpakai. Tekan butang "togol ukuran gambar" untuk melihat versi gambar avatar yang lebih luas. Perhatikan bahawa teks reflow untuk menampung gambar dan bukannya berjalan di atas gambar.

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

Membersihkan Pelampung

Harta saudari Float adalah clear. Unsur yang mempunyai clearsifat di atasnya tidak akan bergerak naik berdekatan dengan pelampung seperti yang diinginkan oleh pelampung, tetapi akan bergerak sendiri melewati pelampung. Sekali lagi ilustrasi lebih berguna daripada perkataan:

Dalam contoh di atas, bar sisi melayang ke kanan dan lebih pendek daripada kawasan kandungan utama. Footer kemudian diminta untuk melompat ke ruang yang tersedia seperti yang diperlukan oleh apungan. Untuk menyelesaikan masalah ini, footer dapat dibersihkan untuk memastikannya berada di bawah kedua tiang terapung.

#footer ( clear: both; )

Clear mempunyai empat nilai yang sah juga. Nilainya bothpaling sering digunakan, yang membersihkan apungan yang datang dari kedua arah. Nilai leftdan rightdapat digunakan untuk membersihkan pelampung dari satu arah masing-masing. Nilai awalnya none, yang biasanya tidak diperlukan kecuali digunakan untuk menghapus clearnilai yang telah ditetapkan secara eksplisit . Nilai inheritmenjadikan elemen mewarisi nilai induknya clear. Anehnya, Internet Explorer tidak menyokong nilai ini sehingga IE8.

Membersihkan hanya leftatau rightmengapung, walaupun jarang dilihat di alam liar, pasti ada kegunaannya.

Keruntuhan Besar

Salah satu perkara yang lebih membingungkan tentang bekerja dengan apungan adalah bagaimana mereka dapat mempengaruhi elemen yang mengandunginya (elemen "induk" mereka). Sekiranya unsur induk tidak mengandungi apa-apa selain elemen terapung, ketinggiannya akan runtuh. Ini tidak selalu jelas jika ibu bapa tidak mempunyai latar belakang yang kelihatan secara visual, tetapi penting untuk diperhatikan.

Seolah-olah berlawanan dengan kejatuhan, alternatifnya lebih buruk. Pertimbangkan senario ini:

Sekiranya elemen blok di atas secara automatik diperluas untuk menampung elemen terapung, kita akan mengalami jeda jarak yang tidak wajar dalam aliran teks antara perenggan, tanpa kaedah praktikal untuk memperbaikinya. Sekiranya ini berlaku, kami para pereka akan lebih banyak mengeluh tentang tingkah laku ini daripada yang kami lakukan ketika runtuh.

Keruntuhan hampir selalu perlu ditangani untuk mengelakkan masalah susun atur dan pelayar silang yang pelik. Kami memperbaikinya dengan membersihkan pelampung setelah elemen terapung di dalam bekas tetapi sebelum penutup ditutup.

Teknik Membersihkan Terapung

Sekiranya anda berada dalam situasi di mana anda selalu tahu apa elemen yang akan berjaya, anda boleh menerapkan clear: both;nilai pada elemen tersebut dan menjalankan perniagaan anda. Ini sangat sesuai kerana ia tidak memerlukan peretasan mewah dan tidak ada unsur tambahan yang menjadikannya semantik. Sudah tentu perkara tidak biasanya berjalan seperti itu dan kita perlu mempunyai lebih banyak alat pembersih apungan di kotak alat kita.

• Kaedah Div Kosong adalah, secara harfiah, div kosong. . Kadang-kadang anda akan melihat
elemen atau elemen rawak lain yang digunakan, tetapi div adalah yang paling umum kerana ia tidak mempunyai gaya lalai penyemak imbas, tidak mempunyai fungsi khas, dan tidak mungkin digayakan secara umum dengan CSS. Kaedah ini dicemooh oleh semantik pemurni kerana ia tidak mempunyai makna kontekstual ke halaman dan ada hanya untuk penyampaian. Sudah tentu, dalam erti kata yang paling ketat, mereka betul. Tetapi, ia menyelesaikan tugas dan tidak menyakiti sesiapa pun.
• Kaedah Overflow bergantung pada menetapkan overflowharta CSS pada elemen induk. Sekiranya harta tanah ini ditetapkan ke autoatau hiddenpada elemen induk, ibu bapa akan berkembang untuk memuatkan pelampung, dengan berkesan membersihkannya untuk elemen yang berjaya. Kaedah ini semantik mungkin kerana tidak memerlukan unsur tambahan. Walau bagaimanapun, jika anda mendapati diri anda menambah yang baru divuntuk menerapkannya, ia sama tidak semantiknya dengan divkaedah kosong , dan kurang sesuai. Ingat juga bahawa harta limpahan bukan khusus untuk membersihkan apungan. Berhati-hatilah untuk tidak menyembunyikan kandungan atau mencetuskan bar tatal yang tidak diingini.
• Kaedah Penjelasan Mudah (atau dikenali sebagai "clearfix") menggunakan pemilih palsu CSS ( :after) untuk membersihkan pelampung. Daripada menetapkan limpahan pada ibu bapa, anda menerapkan kelas tambahan seperti "clearfix" padanya. Kemudian gunakan CSS ini:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Ini akan menerapkan sebilangan kecil kandungan, yang disembunyikan dari pandangan, setelah elemen induk yang membersihkan pelampung. Ini bukan keseluruhan cerita, kerana kod tambahan perlu digunakan untuk menampung penyemak imbas yang lebih lama. Catatan: Lihat juga coretan ini yang mengikuti perkembangan terbaru dan terbaik dalam pembaikan, termasuk "perbaikan mikro" yang lebih baru.

Senario yang berbeza memerlukan kaedah pelepasan apungan yang berbeza. Contohnya, sekumpulan blok, masing-masing dari pelbagai jenis.

Untuk menghubungkan blok serupa yang lebih baik secara visual, kami ingin memulakan baris baru sesuka hati, dalam kes ini apabila warnanya berubah. Kita boleh menggunakan kaedah limpahan atau penjelasan mudah jika setiap kumpulan warna mempunyai elemen induk. Atau, kami menggunakan kaedah div kosong di antara setiap kumpulan. Tiga pembungkus div yang sebelumnya tidak ada atau tiga setelah div yang sebelumnya tidak ada. Saya akan membiarkan anda memutuskan mana yang lebih baik.

Masalah dengan Terapung

Terapung sering dipukul kerana rapuh. Sebahagian besar kerapuhan ini berasal dari pepijat di IE6 dan IE7. Oleh kerana penyemak imbas itu memudar di masa lalu, pepijat ini semakin pudar. Tetapi, masih perlu difahami jika anda perlu melakukan debug "OldIE".

• Pushdown adalah gejala elemen di dalam item terapung yang lebih lebar daripada float itu sendiri (biasanya gambar). Sebilangan besar penyemak imbas akan membuat gambar di luar apungan, tetapi bahagian yang melekat tidak mempengaruhi susun atur yang lain. Versi lama IE memperluas pengapungan untuk memuatkan gambar, sering mempengaruhi susun atur secara drastik. Contoh biasa ialah gambar yang melekat dari kandungan utama mendorong bar sisi ke bawah.
  

  

  Pembaikan cepat: Pastikan anda tidak mempunyai gambar yang melakukannya, gunakan overflow: hidden;untuk memotong lebihan.

• Double Margin Bug - Perkara lain yang perlu diingat ketika berurusan dengan IE 6 adalah jika anda menggunakan margin ke arah yang sama dengan float, ia akan menggandakan margin. Pembaikan cepat: pasang display: inlinepelampung, dan jangan bimbang ia akan tetap menjadi elemen tahap blok.
• The 3px Jog adalah apabila teks yang bersebelahan dengan unsur diapungkan adalah misteri ditendang perjalanan dengan 3px seperti forcefield pelik sekitar apung. Pembaikan cepat: tetapkan lebar atau tinggi pada teks yang terpengaruh.
• Dalam IE 7, Bug Margin Bawah adalah ketika jika ibu bapa terapung telah mengambang anak-anak di dalamnya, margin bawah pada anak-anak tersebut tidak akan diabaikan oleh ibu bapa. Pembaikan cepat: sebagai gantinya menggunakan padding bawah pada ibu bapa.

Alternatif

Sekiranya anda memerlukan pembungkus teks di sekitar gambar, sebenarnya tidak ada alternatif untuk mengapung. Omong-omong, periksa teknik yang agak pintar ini untuk membungkus teks di sekitar bentuk yang tidak teratur. Tetapi untuk susun atur halaman, pasti ada pilihan. Eric Sol mempunyai artikel mengenai A List Apart, Faux Absolute Positioning, yang menerangkan teknik yang sangat menarik yang dalam banyak cara menggabungkan fleksibiliti apungan dengan kekuatan kedudukan mutlak.

CSS3 menangani susun atur halaman dengan beberapa cara:

• Kotak Flex
• Susun atur berbilang lajur
• Susun atur Grid

Float yang betul-betul diposisikan (mis. Anda benar-benar berposisi seperti biasa, tetapi elemen tersebut masih dapat mempengaruhi elemen lain, seperti membungkus teks di sekitarnya) telah dibincangkan, tetapi saya rasa idea itu ditangguhkan kerana persamaan dengan idea susun atur lain yang lebih mantap.

Video

Saya melakukan screencast beberapa ketika untuk menerangkan banyak konsep float ini.

Berkaitan

• clear
• position

Maklumat lanjut

• float dalam spesifikasi W3C
• float di MDN

Sokongan Penyemak Imbas

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Semua	Semua	Semua	Semua	Semua	Semua	Semua