Series Mahir CSS #11 : CSS Float

Hai, teman-teman! Kali ini kita akan membahas tentang properti float di CSS. Kalau kamu ingin mengatur tata letak elemen agar bisa mengalir ke samping atau membuat desain kolom, float adalah properti yang sangat berguna. Yuk, kita pelajari lebih dalam tentang float!

Apa Itu Float?

Properti float di CSS digunakan untuk memposisikan elemen agar mengalir ke kiri atau kanan, memungkinkan elemen di sebelahnya mengalir dan mengisi ruang kosong yang ada. Float sering digunakan untuk membuat layout kolom, galeri gambar, atau untuk mengatur posisi elemen secara fleksibel.

Nilai-nilai Float

1. left

   • Elemen akan mengalir ke kiri dari kontainernya. Elemen lain akan mengalir ke sebelah kanannya.

   Contoh:

   div {
       float: left;
       width: 200px;
       height: 100px;
       background-color: #3498db;
   }
   

2. right

   • Elemen akan mengalir ke kanan dari kontainernya. Elemen lain akan mengalir ke sebelah kirinya.

   Contoh:

   div {
       float: right;
       width: 200px;
       height: 100px;
       background-color: #e74c3c;
   }
   

3. none

   • Ini adalah nilai default. Elemen tidak akan mengalir ke kiri atau kanan, dan akan berada dalam aliran dokumen normal.

   Contoh:

   div {
       float: none;
   }
   

Cara Kerja Float

Jika kamu menggunakan float, elemen akan keluar dari aliran normal dokumen dan "mengapung" ke kiri atau kanan sesuai nilai yang diberikan. Hal ini memungkinkan elemen lain untuk mengalir mengelilinginya.

Misalnya, jika kamu punya dua elemen dan memberikan salah satunya nilai float: left, elemen lainnya akan mengalir di sampingnya, seperti ini:

HTML:

<div class="left">Ini elemen kiri</div>
<div class="right">Ini elemen kanan</div>

CSS:

.left {
    float: left;
    width: 45%;
    background-color: #2ecc71;
    padding: 10px;
}

.right {
    float: left;
    width: 45%;
    background-color: #f39c12;
    padding: 10px;
}

Masalah dengan Float

1. Kontainer yang Terpotong
   Salah satu masalah umum saat menggunakan float adalah bahwa elemen yang mengapung dapat membuat kontainer induknya tidak "membungkus" elemen-elemen tersebut. Artinya, tinggi kontainer tidak akan terhitung jika elemen di dalamnya mengapung.

   Untuk mengatasinya, kita bisa menggunakan dua metode:

   • Clearfix: Tambahkan elemen kosong dengan properti clear di akhir elemen floated.

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

   • Menggunakan overflow pada kontainer:

   .container {
       overflow: hidden;
   }
   

2. Keterbatasan Layout
   Float tidak ideal untuk layout yang sangat rumit atau dinamis, karena bisa menyebabkan elemen saling tumpang tindih atau tidak teratur. Untuk layout yang lebih fleksibel dan mudah, kamu bisa mencoba menggunakan Flexbox atau Grid.

Contoh Penggunaan Float

Membuat Layout Kolom

Misalnya, kamu ingin membuat layout dua kolom di mana kolom pertama lebih lebar daripada kolom kedua.

HTML:

<div class="container">
    <div class="left-column">Kolom Kiri</div>
    <div class="right-column">Kolom Kanan</div>
</div>

CSS:

.container {
    width: 100%;
}

.left-column {
    float: left;
    width: 70%;
    background-color: #3498db;
    padding: 10px;
}

.right-column {
    float: left;
    width: 30%;
    background-color: #e74c3c;
    padding: 10px;
}

Membuat Galeri Gambar dengan Float

Float juga sangat berguna untuk membuat galeri gambar. Setiap gambar akan mengalir ke samping satu sama lain.

HTML:

Note : Sesuaikan path gambar, dibawah ini contoh apabila gambar dan file html berada didalam satu folder yang sama

<div class="gallery">
    <img src="image1.jpg" alt="Image 1" class="gallery-item">
    <img src="image2.jpg" alt="Image 2" class="gallery-item">
    <img src="image3.jpg" alt="Image 3" class="gallery-item">
</div>

CSS:

.gallery {
    width: 100%;
}

.gallery-item {
    float: left;
    width: 30%;
    margin: 10px;
}

Menggunakan Clear

Properti clear digunakan untuk menghapus efek float dan memastikan elemen berikutnya tidak mengalir ke samping elemen yang di-float.

• clear: both;: Menghapus float dari kiri dan kanan.
• clear: left;: Menghapus float di kiri saja.
• clear: right;: Menghapus float di kanan saja.

Contoh:

footer {
    clear: both;
    background-color: #34495e;
    color: white;
    padding: 20px;
}

Sekianlah belajar CSS tentang float. Dengan memahami properti ini, kamu bisa mengatur layout elemen dengan lebih fleksibel. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Sampai jumpa di pembahasan berikutnya, dan jangan lupa untuk terus eksplorasi CSS! ?