1. Apa itu float?

float adalah properti CSS yang digunakan untuk menggeser elemen ke kiri atau ke kanan, sehingga elemen lain dapat berada di sampingnya.

Contoh:

img {
    float: left;
}

Artinya, gambar akan berada di sebelah kiri dan teks dapat mengalir di sebelah kanan gambar.

---

2. Nilai float

Ada beberapa nilai utama:

Nilai	Fungsi
left	Elemen mengambang ke kiri
right	Elemen mengambang ke kanan
none	Tidak menggunakan float
inherit	Mengikuti nilai float dari parent

Contoh:

.box {
    float: left;
}

atau:

.box {
    float: right;
}

---

3. Contoh Float dengan Gambar

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS Float</title>

    <style>
        img {
            width: 200px;
            float: left;
            margin-right: 20px;
        }
    </style>
</head>

<body>

    <h1>Belajar CSS Float</h1>

    <img src="gambar.jpg">

    <p>
        CSS float digunakan untuk mengatur posisi sebuah elemen
        agar berada di sebelah kiri atau kanan. Teks yang berada
        setelah gambar dapat mengalir di samping gambar.
    </p>

    <p>
        Teknik ini dahulu banyak digunakan untuk membuat layout
        website sebelum Flexbox dan CSS Grid populer.
    </p>

</body>
</html>

Hasil konsepnya:

┌──────────────┐
│              │  CSS float digunakan untuk mengatur
│    GAMBAR    │  posisi sebuah elemen agar berada
│              │  di sebelah kiri atau kanan.
└──────────────┘
                  Teks mengalir di samping gambar.

---

4. Float untuk Membuat Layout

float juga dapat digunakan untuk membuat layout sederhana.

Misalnya kita ingin membuat:

┌───────────────────────────────┐
│            HEADER             │
├────────────┬──────────────────┤
│  SIDEBAR   │      CONTENT     │
│            │                  │
│            │                  │
├────────────┴──────────────────┤
│            FOOTER             │
└───────────────────────────────┘

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Layout Float</title>

    <style>

        * {
            box-sizing: border-box;
        }

        .header {
            background: lightblue;
            padding: 20px;
            text-align: center;
        }

        .sidebar {
            width: 30%;
            float: left;
            background: lightgray;
            padding: 20px;
            height: 300px;
        }

        .content {
            width: 70%;
            float: left;
            background: white;
            padding: 20px;
            height: 300px;
        }

        .footer {
            clear: both;
            background: lightgreen;
            padding: 20px;
            text-align: center;
        }

    </style>
</head>

<body>

    <div class="header">
        <h1>Website Saya</h1>
    </div>

    <div class="sidebar">
        <h3>Menu</h3>
        <p>Home</p>
        <p>Profil</p>
        <p>Galeri</p>
        <p>Kontak</p>
    </div>

    <div class="content">
        <h2>Content</h2>
        <p>
            Ini adalah bagian utama website.
        </p>
    </div>

    <div class="footer">
        Footer Website
    </div>

</body>
</html>

---

5. Mengapa width Harus Diperhatikan?

Misalnya:

.sidebar {
    width: 30%;
    float: left;
}

.content {
    width: 70%;
    float: left;
}

Total:

30% + 70% = 100%

Sehingga kedua elemen dapat berada dalam satu baris.

Contoh:

┌───────────────┬─────────────────────────┐
│    SIDEBAR    │         CONTENT         │
│      30%      │           70%           │
└───────────────┴─────────────────────────┘

Kalau:

.sidebar {
    width: 40%;
}

.content {
    width: 70%;
}

Maka:

40% + 70% = 110%

Akibatnya elemen bisa turun ke baris berikutnya.

---

6. Apa itu clear?

Ketika menggunakan float, kita sering membutuhkan:

clear: both;

clear digunakan untuk menghentikan efek float.

Contoh:

.footer {
    clear: both;
}

Artinya footer tidak boleh berada di samping elemen yang menggunakan:

float: left;

atau:

float: right;

Gambaran

Tanpa clear:

┌──────────────┬──────────────────┐
│   SIDEBAR    │     CONTENT      │
│    float     │      float       │
└──────────────┴──────────────────┘
        FOOTER bisa bermasalah

Dengan:

clear: both;

menjadi:

┌──────────────┬──────────────────┐
│   SIDEBAR    │     CONTENT      │
│    float     │      float       │
└──────────────┴──────────────────┘
┌──────────────────────────────────┐
│              FOOTER              │
└──────────────────────────────────┘

---

7. clear mempunyai beberapa nilai

clear: left;

Membersihkan float sebelah kiri.

clear: right;

Membersihkan float sebelah kanan.

clear: both;

Membersihkan float kiri dan kanan.

Yang paling sering digunakan:

clear: both;

---

8. Float untuk Galeri Foto

float juga bisa digunakan membuat galeri sederhana.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Galeri Float</title>

    <style>

        .gallery {
            width: 100%;
        }

        .foto {
            width: 25%;
            float: left;
            padding: 10px;
        }

        .foto img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }

        .clear {
            clear: both;
        }

    </style>
</head>

<body>

    <h1>Galeri Foto</h1>

    <div class="gallery">

        <div class="foto">
            <img src="foto1.jpg">
        </div>

        <div class="foto">
            <img src="foto2.jpg">
        </div>

        <div class="foto">
            <img src="foto3.jpg">
        </div>

        <div class="foto">
            <img src="foto4.jpg">
        </div>

        <div class="clear"></div>

    </div>

</body>
</html>

Hasil:

┌─────────┬─────────┬─────────┬─────────┐
│  FOTO 1 │  FOTO 2 │  FOTO 3 │  FOTO 4 │
└─────────┴─────────┴─────────┴─────────┘

Karena:

.foto {
    width: 25%;
    float: left;
}

Maka:

25% × 4 = 100%

---

9. Float vs Flexbox

Saat ini untuk membuat layout website modern, Flexbox biasanya lebih mudah daripada float.

Float

.box {
    width: 50%;
    float: left;
}

Flexbox

.container {
    display: flex;
}

.box {
    width: 50%;
}

Float masih penting dipelajari karena membantu memahami layout CSS dan aliran elemen, tetapi untuk layout modern biasanya digunakan:

Float
  ↓
Flexbox
  ↓
CSS Grid

---

Hal penting yang perlu diingat:

float: left;

➡️ Elemen bergerak ke kiri.

float: right;

➡️ Elemen bergerak ke kanan.

float: none;

➡️ Float dinonaktifkan.

clear: both;

➡️ Menghentikan efek float kiri dan kanan.

Untuk latihan, kasus yang bagus adalah membuat layout website dengan Header → Sidebar + Content → Footer, kemudian dilanjutkan dengan galeri 4 foto menggunakan float.