Itu bersih
Properti CSS 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. Itu bersih
properti memiliki lima kemungkinan nilai:
tidak ada
kiri
kanan
kedua
mewarisi
Cara Menggunakan Properti CSS yang jelas
Cara paling umum untuk menggunakan bersih
properti setelah Anda menggunakan mengapung
properti pada suatu elemen. Sebagai contoh:
- Teks di sebelah gambar saya.
- Teks yang ada di bawah gambar saya.
Semua elemen default ke jelas: tidak ada;
, jadi jika Anda tidak ingin elemen lain mengapung di samping sesuatu, Anda harus mengubah bersih
gaya.
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 mengosongkan kedua
.
Menggunakan yang jelas dalam Tata Letak
Cara paling umum yang digunakan sebagian besar desainer bersih
properti 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.
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
Sebuah div melayang pendek
Isi di dalam div wadah yang akan berada di sebelah kanan div melayang.
overflow: otomatis;
warna latar belakang akan tetap berada di samping kotak melayang yang lebih panjang ke bagian paling bawah, seperti yang ditunjukkan pada contoh ini.