FLOAT DAN CLEAR

Dalam CSS, properti float digunakan untuk mendorong elemen sejauh mungkin ke kiri atau ke kanan, agar elemen lain dapat membungkus di sekitarnya. Ini sangat berguna saat kamu ingin konten seperti gambar untuk berdampingan dengan teks.

Contoh penggunaan Float:

img {
  float: right;
}

Pada contoh di atas, gambar dipindahkan sejauh mungkin ke kanan halaman, dengan teks berjalan di sebelah kirinya.

Clear

Properti clear digunakan untuk mencegah elemen membungkus sekitar elemen yang mengambang. Dengan kata lain, ia memaksa elemen setelah elemen terapung (float) untuk muncul di bawah elemen tersebut, bukan di sebelahnya.

Contoh penggunaan Clear:

div {
  clear: both;
}

Pada contoh di atas, div tidak akan membungkus di sekitar elemen apa pun yang float, baik ke kiri atau ke kanan.

Menggabungkan Float dan Clear

Keuntungan utama dari penggunaan float dan clear bersama-sama adalah kemampuan untuk membuat layout halaman yang rumit tanpa perlu menggunakan teknik seperti posisi absolut atau pemrograman JavaScript.

Mari kita lihat sebuah contoh:

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

.clear {
  clear: both;
}

Pada contoh di atas, kita membuat dua kolom yang masing-masing mengambil setengah dari lebar halaman. Kami juga memastikan bahwa tidak ada elemen yang membungkus di sekitar mereka dengan menggunakan clear.

Ingatlah bahwa pengetahuan tentang bagaimana menggunakan float dan clear dengan efektif adalah bagian penting dari kemampuan CSS kamu. Menggabungkan properti ini dengan cara yang benar bisa membantu kamu membuat layout yang responsif dan fleksibel.