Ciri CSS yang jelas 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. Hartanah yang jelas mempunyai lima nilai yang mungkin:
- tiada
- dibiarkan
- betul
- kedua-duanya
- mewarisi
Bagaimana Menggunakan Harta CSS yang jelas
Cara yang paling biasa untuk menggunakan harta yang jelas adalah selepas anda menggunakan harta apungan pada elemen. Sebagai contoh:
Teks di sebelah imej saya.
Teks yang ada di bawah imej saya.
Semua elemen lalai untuk membersihkan: tiada; , jadi jika anda tidak mahu elemen lain terapung di sebelah sesuatu, anda mesti mengubah gaya yang jelas.
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 elemen yang terapung untuk kedua-dua kanan dan kiri, anda boleh mengosongkan satu sisi atau anda boleh mengosongkan kedua-duanya.
Menggunakan Layouts yang jelas
Cara yang paling biasa kebanyakan pereka menggunakan harta yang jelas 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.
Div melayang pendek
Kandungan di dalam div bekas yang akan berada di sebelah kanan div terapung.
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 limpahan: auto; warna latar akan kekal di sebelah kotak terapung yang lebih panjang ke bahagian paling bawah, seperti yang ditunjukkan dalam contoh ini .