float menggeser sebuah elemen, biasanya gambar, ke pinggir kiri atau kanan, lalu teks di sekitarnya mengalir mengitarinya. Bayangin halaman majalah: foto di pinggir kiri, tulisannya mengalir rapat di sebelah kanan foto, lalu lanjut di bawahnya. clear adalah pasangannya: dia menyuruh elemen berhenti mengalir di samping float dan mulai di bawahnya.
🧪 Tebakan cepat: sebuah kotak berbingkai berisi gambar yang di-float dan satu baris teks. Bingkainya membungkus gambar atau cuma teksnya? Tebak dulu, jawabannya ada di bagian "Parent yang kempes".
Gambar di kiri, teks di kanan
<img src="danau.jpg" alt="Danau Toba">
<p>Danau Toba terbentuk dari letusan gunung api purba. Di tengahnya sekarang ada Pulau Samosir.</p>
<style>
img {
float: left;
margin-right: 16px;
}
</style>
imgadalah selector. Aturan di dalam{ }sesudahnya berlaku buat semua gambar.float: left;menggeser gambar ke pinggir kiri. Paragraf yang tadinya ada di bawah gambar sekarang naik dan mengalir di sisi kanannya.margin-right: 16px;memberi jarak 16 piksel di sebelah kanan gambar, biar teksnya gak nempel ke gambar.
Hasilnya, gambar di kiri dan teks di kanan, kayak di majalah. Tanpa float, cuma satu baris teks yang sejajar dengan bagian bawah gambar, sisanya turun ke bawah gambar.
Di latihan, aturan img { } sudah ada, isinya komentar /* tulis CSS di sini */. Ganti komentar itu dengan baris-baris CSS-nya, di dalam kurung kurawal yang sama.
Kiri, kanan, atau gak sama sekali
float: leftmenaruh elemen di kiri, teks mengalir di kanannya.float: rightmenaruh elemen di kanan, teks mengalir di kirinya. Jaraknya pindah ke sisi kiri gambar: pakaimargin-left.float: noneadalah nilai bawaan: gak mengambang.
clear: mulai di bawah float
Paragraf kedua juga ikut mengalir di samping gambar selama masih ada ruang. Kalau kamu mau dia mulai di bawah gambar, kasih clear:
.paragraf-kedua {
clear: both;
}
clear: both artinya "jangan sejajar dengan float mana pun, kiri maupun kanan". Ada juga clear: left (cuma lewat float kiri) dan clear: right.
Parent yang kempes
Elemen yang di-float gak dihitung buat tinggi parent-nya (elemen yang membungkusnya). Jadi kotak berbingkai yang isinya gambar float dan satu baris teks cuma setinggi teksnya, dan gambarnya nongol keluar dari bawah bingkai. Itu jawaban tebakannya: cuma teksnya.
Solusinya, kasih parent-nya display: flow-root:
.kartu {
display: flow-root;
}
Sekarang bingkainya membungkus gambar juga. Di kode lama kamu bakal ketemu cara yang lebih ribet bernama clearfix: elemen kosong ::after di parent yang diberi clear: both. overflow: auto di parent juga bisa, karena efek sampingnya sama.
⚠️ Jebakan yang sering ketemu
- Float buat layout halaman. Kolom, sidebar, dan grid kartu lebih gampang pakai flexbox atau grid. Float gunanya buat teks yang mengalir di sekitar gambar.
- Margin di sisi yang salah. Gambar
float: leftbutuh jarak di kanan (margin-right), gambarfloat: rightbutuh jarak di kiri (margin-left). - Menulis
floatdi luar{ }. Barisnya harus ada di dalam aturanimg { }, sebelum}.
TL;DR: float: left atau float: right menggeser elemen ke pinggir dan bikin teks mengalir di sebelahnya. Kasih margin di sisi yang menghadap teks. clear: both bikin elemen mulai di bawah float. Kalau parent-nya kempes karena anaknya di-float, kasih parent-nya display: flow-root (cara lamanya: clearfix).
