DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

FLOAT DAN CLEAR

Pelajari tentang Float dan Clear dalam CSS dan bagaimana cara menggunakannya untuk membentuk layout pada halaman web.

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.

👈🏼 Position sticky
Z-index 👉🏼