Properti CSS yang jelas telah menjadi bagian dari CSS sejak CSS1. Ini memungkinkan Anda menentukan elemen apa yang bisa mengapung di samping elemen yang dihapus dan di sisi mana. Properti yang jelas memiliki lima kemungkinan nilai:
- tidak ada
- kiri
- kanan
- kedua
- mewarisi
Cara Menggunakan Properti CSS yang jelas
Cara paling umum untuk menggunakan properti yang jelas adalah setelah Anda menggunakan properti pelampung pada elemen. Sebagai contoh:
Teks di sebelah gambar saya.
Teks yang ada di bawah gambar saya.
Semua elemen default untuk membersihkan: tidak ada; , jadi jika Anda tidak ingin elemen lain mengapung di samping sesuatu, Anda harus mengubah gaya yang jelas.
Ketika Anda membersihkan pelampung, Anda mencocokkan Anda jelas dengan float Anda. Jadi jika Anda melayangkan elemen ke kiri, maka Anda harus menjernihkan ke kiri. Elemen mengambang Anda akan terus mengambang, tetapi elemen yang dihapus dan semuanya setelah itu akan muncul di bawahnya pada halaman web.
Jika Anda memiliki elemen yang mengambang ke kanan dan kiri, Anda dapat menghapus hanya satu sisi atau Anda dapat menghapus keduanya.
Menggunakan yang jelas dalam Tata Letak
Cara paling umum sebagian besar desainer menggunakan properti yang jelas adalah dalam tata letak elemen halaman . Anda mungkin memiliki gambar yang mengambang di dalam blok teks dan ingin paragraf berikutnya untuk memulai di bawah gambar, atau Anda mungkin memiliki seluruh kolom teks yang ingin Anda mengambang di samping sekelompok teks lain, dengan beberapa teks muncul di bawah ini.
Berikut ini adalah HTML untuk tata letak dalam formulir ini.
Ini memiliki satu wadah div memegang yang lain yang melayang ke kiri.
Sebuah div melayang pendek
Isi di dalam div wadah yang akan berada di sebelah kanan div melayang.
Ini akan berfungsi dengan baik, dengan div yang lebih pendek mengambang di sebelah kiri dari sisa konten div utama.
Anda dapat menghapus teks di samping kotak mengambang hanya dengan menambahkan tag di mana Anda ingin mulai menulis di bawah kotak melayang.
Tapi masalahnya muncul ketika kotak melayang lebih panjang dari isi di sebelahnya. Kemudian, seperti yang Anda lihat, warna latar belakang kotak utama tidak dibawa ke bagian bawah kotak yang dilayang.
Untungnya, ada cara mudah untuk memperbaiki ini: properti. Dengan mengatur kotak utama ke overflow: auto; warna latar belakang akan tetap berada di samping kotak melayang yang lebih panjang ke bagian paling bawah, seperti yang ditunjukkan pada contoh ini .