The jelas
Hartanah CSS telah menjadi sebahagian daripada CSS sejak CSS1. Ia membolehkan anda menentukan unsur-unsur apa yang boleh terapung di sebelah unsur yang dibersihkan dan di sebelah mana. The jelas
harta mempunyai lima nilai yang mungkin:
tiada
ditinggalkan
betul
kedua-duanya
mewarisi
Bagaimana Menggunakan Harta CSS yang jelas
Cara yang paling biasa untuk menggunakan jelas
harta adalah selepas anda menggunakan a terapung
harta pada elemen. Sebagai contoh:
- Teks di sebelah imej saya.
- Teks yang ada di bawah imej saya.
Semua unsur adalah lalai jelas: tiada;
, jadi jika anda tidak mahu elemen lain melayang di sebelah sesuatu, anda mesti mengubahnya jelas
gaya.
Apabila anda membersihkan terapung, anda sepadan dengan jelas ke float anda. Oleh itu, jika anda mengapungkan elemen ke kiri, maka anda perlu mengosongkan ke kiri. Elemen terapung anda akan terus terapung, tetapi unsur yang dibersihkan dan segala-galanya selepas itu akan muncul di bawahnya di laman web.
Sekiranya anda mempunyai unsur-unsur yang terapung di sebelah kanan dan kiri, anda boleh membersihkan hanya satu sisi atau anda boleh membersihkannya kedua-duanya
.
Menggunakan Layouts yang jelas
Cara yang paling biasa kebanyakan pereka menggunakan jelas
harta adalah dalam susun atur elemen halaman. Anda mungkin mempunyai imej yang terapung di dalam blok teks dan mahu perenggan seterusnya untuk bermula di bawah imej, atau anda mungkin mempunyai keseluruhan lajur teks yang anda mahu terapung di sebelah sekumpulan teks lain, dengan beberapa teks yang muncul di bawah.
Berikut adalah HTML untuk susun atur dalam borang ini. Ia mempunyai satu bekas div memegang satu lagi yang terapung ke kiri.
Ini akan berfungsi dengan baik, dengan div yang lebih pendek terapung di sebelah kiri kandungan kandungan div utama. Anda boleh mengosongkan teks di sebelah kotak terapung dengan hanya menambah tag di mana anda mahu untuk memulakan menulis di bawah kotak terapung. Tetapi masalahnya datang apabila kotak terapung lebih panjang daripada kandungan di sebelahnya. Kemudian, seperti yang anda lihat, warna latar belakang kotak utama tidak dibawa ke bahagian bawah kotak terapung. Nasib baik, ada cara mudah untuk memperbaikinya: harta itu. Dengan menetapkan kotak utama kepada
Div melayang pendek
Kandungan di dalam div bekas yang akan berada di sebelah kanan div terapung.
limpahan: auto;
warna latar akan kekal di sebelah kotak terapung yang lebih panjang ke bahagian paling bawah, seperti yang ditunjukkan dalam contoh ini.