Rumah > Artikel > hujung hadapan web > Apakah peranan atribut float dalam atribut css
Fungsi atribut apungan dalam CSS adalah untuk mengawal pergerakan elemen Walaupun elemen bergerak ke kiri atau kanan, unsur-unsur di sekelilingnya juga akan disusun semula arah mendatar unsur itu; yang bermaksud bahawa elemen itu hanya boleh bergerak ke kiri dan ke kanan Ia tidak boleh bergerak ke atas atau ke bawah; elemen terapung akan cuba bergerak ke kiri atau kanan sehingga tepi luarnya menyentuh kotak yang mengandungi atau sempadan kotak terapung yang lain.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3, komputer DELL G3
Apakah peranan atribut float dalam atribut css ?
float, atribut CSS, nilai atribut utama adalah: kiri (kiri terapung), tiada (tidak terapung), kanan (kanan terapung), warisi (warisi elemen induk terapung), kebanyakannya menggunakan reka letak halaman Web.
CSS Float akan menggerakkan elemen ke kiri atau kanan, dan elemen sekeliling juga akan disusun semula.
Float sering digunakan untuk imej, tetapi ia juga sangat berguna dalam reka letak.
Cara elemen terapung
Unsur terapung secara mendatar, yang bermaksud elemen itu hanya boleh bergerak ke kiri dan ke kanan tetapi tidak ke atas dan ke bawah.
Elemen terapung akan bergerak sejauh kiri atau kanan yang mungkin sehingga tepi luarnya menyentuh sempadan kotak yang mengandungi atau kotak terapung lain.
Elemen yang mengikuti elemen terapung akan mengelilinginya.
Elemen sebelum elemen terapung tidak akan terjejas.
Jika imej terapung ke kanan, aliran teks berikut akan membungkusnya ke kiri:
Instance
img { float:right; }
Unsur terapung bersebelahan antara satu sama lain
Jika anda meletakkan beberapa elemen terapung bersama, ia akan bersebelahan jika ada ruang.
Di sini kita menggunakan atribut float untuk galeri imej:
Instance
.thumbnail { float:left; width:110px; height:90px; margin:5px; }
Kosongkan float - gunakan clear
Selepas elemen diapungkan, elemen sekeliling akan disusun semula Untuk mengelakkan ini, gunakan atribut yang jelas. Atribut
jelas menyatakan bahawa unsur terapung tidak boleh muncul pada kedua-dua belah elemen.
Gunakan atribut yang jelas untuk menambah galeri gambar pada teks:
Contoh
.text_line { clear:both; }
Pembelajaran yang disyorkan: "tutorial video css"
Atas ialah kandungan terperinci Apakah peranan atribut float dalam atribut css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!