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:

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:

#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:

#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:

#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:

Kode CSS:

FAQ (Frequently Asked Question)

Bagaimana cara menghapus value dalam float CSS?

Menghapus atau menonaktifkan value dalam float CSS bisa dilakukan dengan beberapa cara, tergantung pada situasi dan hasil yang diinginkan. Berikut beberapa metode yang dapat kamu gunakan:

• Menggunakan value default: jika kamu ingin 'menghapus' efek dari float, cara yang direkomendasikan (terutama saat menggunakan media query dalam desain responsif) adalah mengatur kembali propertinya ke nilai default, yaitu none. Elemen akan kembali ke normal flow pada kondisi tertentu yang ditentukan, seperti ukuran layar atau tampilan layar device saat digunakan. 
• Menghapus properti dari kode: cara lain yang lebih cepat untuk menghapus float adalah menghapus baris kode dari file CSS. Hal ini bisa dilakukan dengan membuka file CSS di text editor lalu menghapus baris yang berisi properti float.
• Menggunakan inline styles: kamu juga dapat menimpa setting CSS eksternal menggunakan inline styles langsung pada elemen HTML. Cara ini berguna jika kamu hanya ingin menghapus float untuk satu instance spesifik dari elemen.
• Menggunakan !important: dalam beberapa kasus, aturan CSS mungkin tidak diterapkan karena konflik dengan aturan lain. Kamu bisa menggunakan declaration !important untuk memastikan float: none; diprioritaskan.
• Clear floats: jika masalahnya adalah elemen lain terpengaruh oleh float, kamu bisa menggunakan properti clear. Properti ini tidak menghapus float tetapi menghilangkan efeknya pada elemen di sekitarnya.

Penutup

Pada penjelasan di atas, kita telah melihat bagaimana float dapat membuat elemen lepas dari normal flow dan mengambang di sepanjang sisi container, memberikan fleksibilitas dan kontrol lebih dalam desain web. Mulai dari sintaks dasar sampai penerapannya dalam menyusun elemen HTML, float muncul sebagai properti yang membantu developer mengontrol layout visual sebuah halaman web dengan presisi.

Namun, penting juga untuk diperhatikan tantangan tertentu saat menggunakan float, seperti pengaruhnya terhadap normal flow elemen dan kebutuhan akan teknik 'clearfix'. Oleh sebab itu, kamu perlu memahami cara penggunaan properti ini dengan tepat agar bisa memenuhi kebutuhan desain.