Dito PriwantoPada belajar CSS bagian 14, kita telah belajar tentang apa itu properti CSS position. Dalam seri lanjutan belajar CSS bagian ke 15 ini, kita akan belajar mengenal apa itu properti CSS Float beserta contoh dan penggunaannya. Simak informasi berikut ini.
Apa itu Properti CSS Float?
CSS float adalah salah satu properti CSS yang digunakan untuk mengatur posisi elemen agar melayang ke kiri atau kanan dari kontainer atau elemen HTML induknya. Misalnya, jika Anda ingin menempatkan gambar di sebelah kiri teks, maka Anda bisa menggunakan float: left. Jika Anda ingin menempatkan gambar disebelah kanan teks, maka Anda bisa menggunakan float: right.
Dengan CSS float, elemen lain di halaman akan menyesuaikan posisinya mengelilingi elemen yang di-float kan.
Fungsi utama CSS Float adalah membantu mengatur tata letak halaman secara lebih fleksibel, terutama saat menempatkan elemen berdampingan. Namun, Anda harus berhati-hati karena properti ini bisa memengaruhi struktur layout secara keseluruhan jika tidak dikontrol dengan benar.
Fungsi Properti CSS Float
Sebelum ada teknik modern, CSS Float sering digunakan untuk menyusun elemen secara horizontal. Salah satu contoh fungsi utama yaitu mengatur gambar agar teks bisa membungkusnya (misalnya gambar di kiri, teks di kanan). Untuk menggunakan property CSS Float, anda harus membuat sebuah elemen HTML dengan property:float.
Berikut contohnya :
.container{
float: none;
}Nilai Properti Dasar
Beberapa nilai properti yang sering digunakan yaitu:
- left berfungsi untuk membuat elemen berada di sebelah kiri dan elemen lainnya akan berada di kanan atau di sebelahnya.
- right berfungsi untuk membuat elemen berada di sebelah kanan dan elemen lainnya akan berada di sebelah kiri atau di sebelahnya
- none nilai default properti float.
- inherit nilai Float akan mengikuti dari elemen induknya.
Kelebihan dan Kekurangan
Berikut beberapa kelebihan dan kekurangan penggunaan properti CSS float:
Kelebihan
- Mudah digunakan untuk teks dan gambar.
- Membuat layout sederhana.
- Didukung semua browser.
- Ringan dan cepat.
Kekurangan
- Membutuhkan
clearfixagar elemen induk dapat mengenali tinggi dari float. - Kurang fleksibel untuk tampilan layout yang kompleks.
- Sudah mulai ketinggalan zaman.
Contoh Implementasi
Berikut adalah contoh script lengkap penggunaan Properti CSS Float yang telah diterapkan ke kode html.
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Float</title>
<style>
img {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img height="300" src="pindah-hosting.png" alt="Gambar">
<p>Teks ini akan mengalir dan berada di sebelah kanan gambar.</p>
</body>
</html>Jika di test akses menggunakan browser, maka berikut tampilannya.
Menambahkan clearfix
Setelah sebuah elemen html menggunakan properi float, elemen induknya bisa jadi tidak lagi mengenali tinggi dari elemen tersebut. Solusinya bisa dengan menggunakan teknik clearfix, berikut contoh script css:
.clearfix::after {
content: "";
clear: both;
display: block;
}Sehingga kode lengkapnya menjadi sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Float</title>
<style>
img {
float: left;
margin-right: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="container clearfix">
<img src="pindah-hosting.png" alt="Gambar">
<p>Teks ini akan mengalir dan berada di sebelah kanan gambar.</p>
</div>
</body>
</html>Hal ini akan membuat properti float berada di dalam kontainer clearfix. Perbedaannya seperti pada screenshoot berikut:
Tidak menggunakan clearfix
Dari gambar di atas, elemen induk/container tidak mengenali tinggi elemen yang menggunakan properti float. Elemen yang menggunakan float yaitu elemen img.
Menggunakan clearfix
Dari gambar di atas, elemen induk/container mengenali tinggi elemen yang menggunakan properti float. Elemen yang menggunakan float yaitu elemen img sehingga akan mempermudah dalam melakukan styling.
Kesimpulan
CSS float sangat berguna dalam mengatur posisi elemen, terutama untuk mengelilingi gambar dengan teks atau membuat layout sederhana. Namun, dalam pengembangan modern, float telah banyak digantikan oleh properti yang lebih fleksibel seperti Flexbox dan CSS Grid, yang lebih mudah diatur untuk desain responsif dan kompleks.
Demikian artikel belajar CSS bagian ke 15 yang menjelaskan tentang Properti CSS Float. Selanjutnya, Anda bisa belajar tentang property z-index pada seri lanjutannya, jangan sampai ketinggalan ya!
