Peranan apungan dalam css

Harta apungan dalam CSS membenarkan elemen keluar daripada aliran dokumen dan berbaris di sepanjang tepi elemen induknya, untuk mencipta imej teks yang dijajarkan, dijajarkan, bar sisi menu terapung dan elemen bertindih. Nilai atribut unsur terapung termasuk kiri (apung kiri), kanan (apung kanan), tiada (apung jelas), dan mewarisi (warisan). Untuk mengelakkan elemen terapung daripada menyebabkan elemen induk melimpah, anda boleh menggunakan teknik clearfix untuk menambah elemen kosong dan mengosongkan float.

Peranan float dalam CSS

float ialah sifat penting dalam CSS, digunakan untuk mengawal kedudukan elemen pada halaman. Ia membenarkan elemen keluar daripada aliran dokumen biasa dan berbaris di sepanjang tepi (kiri atau kanan) elemen induknya.

Cara apungan berfungsi

Apabila elemen terapung, ia dialih keluar daripada aliran dokumen dan diletakkan di tepi elemen induk. Unsur terapung akan menduduki ruang mendatar yang tersedia sehingga ia menemui unsur terapung lain atau sempadan kontena.

Penggunaan apungan

harta apungan boleh digunakan untuk tujuan berikut:

• Buat lajur bersebelahan
• Jajarkan teks atau imej
• Buat elemen terapung
• Buat menu terapung

Nilai sifat terapung Atribut

float mempunyai nilai atribut berikut:

• kiri: Terapung elemen di sebelah kiri elemen induk
• kanan: unsur terapung ke kanan:
Terapung elemen
• tiada:
Kosongkan apungan, Benarkan elemen mengalir seperti biasa dalam aliran dokumen
• warisi:
Warisi nilai apungan ​​daripada unsur induk

Kosongkan unsur apungan

Mungkin

melimpah. Untuk mengelakkan ini, terapung boleh dibersihkan menggunakan teknik clearfix. Pendekatan biasa ialah menggunakan kod CSS berikut:

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

Ini akan menambah elemen kosong dengan jelas: kedua-dua atribut kepada elemen induk, sekali gus mengosongkan apungan dan menghalang limpahan. 🎜

Atas ialah kandungan terperinci Peranan apungan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!