Float CSS adalah properti yang digunakan dalam web development untuk mengubah cara elemen HTML disusun di dalam container web. Properti ini memungkinkan elemen (seperti images atau div) "mengambang" ke sisi kiri atau kanan container, sementara elemen lain mengalir di sekitarnya.

Secara teknis, saat elemen diberi properti float, elemen tersebut “diangkat” dari normal flow dan ditempatkan sepanjang sisi container. Elemen lain kemudian mengalir di sekitar elemen yang mengambang tersebut.

Namun, float tidak datang tanpa tantangan. Untuk menggunakannya, kamu perlu memahami secara mendalam bagaimana elemen-elemen berinteraksi dalam ruang dua dimensi. Melalui artikel ini, kita akan menjelajahi lebih detail tentang float, mulai dari syntax, values, sampai cara dan contoh penggunaanya.

Syntax Float CSS

Untuk menggunakan properti float, terlebih dahulu kamu harus mengetahui sintaksnya. Berikut cara penulisan float dalam CSS:

selector {
  float: values;
}

Dalam sintaks di atas, "values" bisa berupa:

  • left: elemen akan mengambang ke sisi kiri container-nya. Bisa juga menggunakan value inline-start.

  • right: elemen akan mengambang ke sisi kanan container-nya. Bisa juga menggunakan value inline-end.

  • none: elemen tidak akan mengambang. Ini adalah nilai default.

  • inherit: elemen akan mewarisi nilai properti float dari elemen induk.

Dalam praktiknya, penting untuk diingat bahwa elemen yang diatur untuk mengambang dapat keluar dari normal flow dan berpotensi menyebabkan masalah layout. Untuk mengatasi ini, kamu perlu menggunakan teknik yang disebut "clearfix" agar konten tidak 'runaway' atau berantakan.

Values dalam Properti Float CSS

Setiap values dalam properti float memberikan kontrol kepada web developer untuk mengatur layout elemen-elemen dalam sebuah halaman web. Dengan menggunakan nilai-nilai ini secara tepat, kamu dapat memastikan setiap elemen ditempatkan presisi sesuai keinginan.

Mari kita bahas masing-masing values yang tersedia untuk properti float.

None

Value float: none; menetapkan bahwa elemen tidak akan mengambang. Artinya, elemen akan ditampilkan di tempatnya dalam normal flow. Value none adalah nilai default yang digunakan jika kamu tidak ingin elemen tertentu mengambang ke sisi mana pun dari container-nya.

Left

Value float: left; membuat elemen akan mengambang ke sisi kiri container. Elemen lain di sekitar elemen yang mengambang akan mengisi ruang di sisi kanannya.

Nilai ini berguna ketika kamu ingin teks mengalir di sebelah kanan gambar atau elemen lain.

Right

Berbanding terbalik dengan left, value float: right; menjadikan elemen mengambang ke sisi kanan container, dengan elemen lain mengisi ruang di sisi kirinya. Value ini sering dipakai untuk menempatkan elemen seperti menu navigasi atau panel informasi di sisi kanan halaman web.

Inherit

Value float: inherit; menunjukkan bahwa elemen akan mewarisi nilai properti float dari elemen induk (parent element). Dengan kata lain, penetapan pengambangan suatu elemen akan sama seperti elemen induknya.

Cara dan Contoh Penggunaan Float CSS

Berikut cara menggunakan float dan contoh penggunaannya untuk menyusun elemen HTML berdampingan:

#1 Tentukan elemen yang ingin diatur

Pertama, tentukan elemen HTML yang ingin kamu atur dengan float. Elemen ini bisa berupa gambar, div, atau elemen lain dalam kode HTML milikmu.

#2 Tambahkan properti float dalam CSS

Setelah itu, buka file CSS yang berkaitan dengan halaman web-mu. Di sini, kamu akan menambahkan aturan CSS untuk elemen yang telah ditentukan.

Tambahkan properti float dan tentukan apakah kamu ingin elemen mengambang ke kiri (left) atau ke kanan (right).

Contoh:

.element-kiri {
  float: left;
}

.element-kanan {
  float: right;
}

#3 Atur lebar elemen (opsional)

Agar lebih terkontrol, kamu mungkin ingin menentukan lebar elemen yang menggunakan float. Hal ini membantu memastikan elemen tersebut tidak mengambil terlalu banyak ruang.

Contoh:

.element-kiri {
  float: left;
  width: 50%;
}

.element-kanan {
  float: right;
  width: 50%;
}

#4 Tambahkan clearfix (jika diperlukan)

Menggunakan float berpotensi memengaruhi elemen lain di sekitarnya. Untuk menghindari hal ini, gunakan teknik 'clearfix'. Teknik ini membantu mempertahankan flow layout yang normal.

Contoh:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#5 Uji tampilan web

Setelah menambahkan dan menyesuaikan setting untuk float, simpan perubahan lalu refresh halaman web untuk melihat hasilnya. Sesuaikan jika diperlukan.

Misalkan kamu memiliki dua div yang ingin ditempatkan berdampingan. Berikut cara mengaturnya menggunakan float:

Kode HTML:


  
    Ini adalah elemen di sisi kiri.