lanjutan tentang Float css
Float dan clear adalah dua properti CSS yang sering digunakan untuk mengatur tata letak (layout) elemen dalam halaman web.
Float:
Properti float digunakan untuk menggeser elemen ke sisi kanan atau kiri, sehingga elemen tersebut akan melayang di sebelah kanan atau kiri elemen sebelumnya. Dengan menggunakan float, elemen dapat "mengapung" di sebelah elemen lain, dan elemen-elemen berikutnya dapat mengalir di sekitarnya.
Contoh penggunaan float:
css
Copy code
.float-left {
float: left;
}
.float-right {
float: right;
}
Pada contoh di atas, kelas .float-left akan membuat elemen tersebut mengapung ke kiri, sementara kelas .float-right akan membuat elemen mengapung ke kanan. Elemen yang mengapung akan mempengaruhi tata letak elemen-elemen berikutnya.
Clear:
Properti clear digunakan untuk mengatur perilaku tata letak elemen setelah elemen yang memiliki float. Properti ini menentukan apakah elemen tersebut harus "membersihkan" (clear) float yang ada di sekitarnya, sehingga elemen tersebut akan dimulai di bawah elemen yang memiliki float.
Contoh penggunaan clear:
css
Copy code
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.clear-both {
clear: both;
}
Pada contoh di atas, kelas .clear-left akan membuat elemen memulai tata letaknya di bawah elemen yang memiliki float di sebelah kiri. Kelas .clear-right akan membuat elemen memulai tata letaknya di bawah elemen yang memiliki float di sebelah kanan. Kelas .clear-both akan membuat elemen memulai tata letaknya di bawah elemen yang memiliki float di kedua sisi.
Nilai clear yang umum digunakan adalah:
clear: left untuk membersihkan float yang ada di sebelah kiri.
clear: right untuk membersihkan float yang ada di sebelah kanan.
clear: both untuk membersihkan float yang ada di kedua sisi.
Properti clear biasanya digunakan pada elemen yang ingin dimulai di bawah elemen-elemen yang mengapung, sehingga elemen tersebut tidak tumpang tindih dengan elemen yang memiliki float.
Penting untuk diingat bahwa float telah digantikan oleh teknik tata letak modern seperti Flexbox dan Grid Layout. Jika memungkinkan, disarankan untuk menggunakan teknik tata letak yang lebih modern tersebut untuk mengatur elemen dalam halaman web.
