Apakah sifat apungan?

Atribut terapung termasuk kiri, kanan, tiada, mewarisi, dsb. Pengenalan terperinci: 1. ke kiri, elemen terapung ke kiri Apabila ditetapkan ke kiri, elemen akan berpisah daripada aliran dokumen biasa, terapung ke kiri, dan membenarkan elemen lain dipaparkan di sebelah kanannya , elemen terapung ke kanan, dan kiri Begitu juga, apabila ditetapkan ke kanan, elemen akan terlepas daripada aliran dokumen biasa, terapung ke kanan, dan membenarkan elemen lain dipaparkan di sebelah kirinya; elemen tidak akan terapung, dan apabila ditetapkan kepada tiada, elemen akan kembali normal, dsb.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Atribut terapung (float) ialah salah satu atribut yang biasa digunakan dalam CSS, digunakan untuk mengawal kedudukan terapung elemen pada halaman. Dengan menetapkan sifat apungan elemen, anda boleh mengeluarkan elemen daripada aliran dokumen dan meletakkannya secara bebas pada halaman. Artikel ini akan memperkenalkan pelbagai nilai atribut apungan dan penggunaannya.

Atribut apungan mempunyai nilai berikut:

1: Unsur terapung ke kiri. Apabila ditetapkan ke kiri, elemen akan berpisah daripada aliran dokumen biasa, terapung ke kiri dan membenarkan elemen lain dipaparkan di sebelah kanannya. Jika halaman tidak cukup lebar untuk memuatkan elemen terapung, ia akan membalut secara automatik.

2 kanan: Unsur terapung ke kanan. Sama seperti kiri, apabila ditetapkan ke kanan, elemen akan berpisah daripada aliran dokumen biasa, terapung ke kanan dan membenarkan elemen lain dipaparkan di sebelah kirinya. Jika halaman tidak cukup lebar untuk memuatkan elemen terapung, ia akan membalut secara automatik.

3 tiada: Unsur tidak terapung. Apabila ditetapkan kepada tiada, elemen akan kembali kepada susun atur aliran dokumen biasa dan tidak akan terapung. Ini ialah nilai lalai.

4. Warisi: Warisi sifat terapung unsur induk. Apabila ditetapkan untuk mewarisi, elemen akan mewarisi atribut apungan bagi elemen induk Jika elemen induk tidak menetapkan atribut apungan, ia adalah sama dengan tiada.

Ciri susun atur elemen terapung:

- Elemen terapung secara automatik akan mengecut mengikut lebar kandungannya dan tidak akan menduduki keseluruhan lebar elemen induk.

- Elemen terapung akan diletakkan sedekat mungkin dengan sebelah kiri atau kanan bekasnya, bersebelahan dengan elemen terapung lain.

- Jika lebar elemen terapung melebihi lebar elemen induk, ia akan membalut secara automatik.

- Elemen terapung berpisah daripada aliran dokumen biasa, jadi elemen tidak terapung berikutnya mengisi ruang kosong yang ditinggalkan oleh elemen terapung.

Senario aplikasi unsur terapung:

1 Laksanakan reka letak berbilang lajur: Dengan menetapkan berbilang elemen sebagai elemen terapung, anda boleh mencapai reka letak berbilang lajur. Contohnya, menetapkan berbilang elemen div untuk terapung: kiri boleh menyusunnya secara mendatar dalam satu baris.

2. Kesan sekeliling gambar dan teks: Dengan menetapkan gambar sebagai elemen terapung, anda boleh mencapai kesan lilitan teks di sekeliling gambar.

3 Menu Navigasi: Dengan menetapkan item senarai menu navigasi sebagai elemen terapung, anda boleh mencapai menu navigasi yang disusun secara mendatar.

4. Reka letak responsif: Dalam reka bentuk responsif, dengan menetapkan atribut terapung di bawah saiz skrin yang berbeza, reka letak penyesuaian halaman pada peranti berbeza boleh dicapai.

Perlu diambil perhatian bahawa elemen terapung boleh menyebabkan ketinggian elemen induk runtuh, iaitu elemen induk tidak boleh mengembang secara automatik untuk menampung elemen terapung. Untuk menyelesaikan masalah ini, anda boleh menambah kelas clearfix pada elemen induk atau menggunakan kaedah lain untuk mengosongkan terapung.

Ringkasan:

Atribut apungan ialah atribut reka letak yang biasa digunakan dalam CSS Dengan menetapkan atribut apungan, anda boleh mencapai kedudukan bebas elemen dan kesan reka letak berbilang lajur. Nilainya adalah kiri, kanan, tiada dan mewarisi, yang masing-masing menunjukkan terapung ke kiri, terapung ke kanan, tidak terapung dan mewarisi atribut terapung unsur induk. Elemen terapung boleh mencapai pelbagai kesan reka letak, tetapi anda perlu memberi perhatian kepada masalah yang boleh menyebabkan ketinggian elemen induk runtuh.

Atas ialah kandungan terperinci Apakah sifat apungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!