Coba liat majalah cetak: foto sering di pinggir, terus teks mengalir membungkus foto — gak overlap, gak ngosongin space, rapat tapi rapi. Itu float di dunia cetak. Browser punya float CSS yang ngasih efek serupa di web. Tapi ada drama sejarah: dari 2005-2015, developer salah pake float buat seluruh layout halaman (sidebar, kolom, grid) — dengan hack clearfix ribet. Sekarang Flexbox + Grid udah ada, jadi float balik ke fungsi aslinya: text-wrap di sekitar gambar.

img { float: left; margin-right: 10px; }

Nilai float:

• left — elemen mengambang ke kiri
• right — elemen mengambang ke kanan
• none — default, tidak mengambang

Clear — menghentikan elemen agar tidak sejajar dengan float:

.footer { clear: both; } /* tidak sejajar dengan float kiri/kanan */

Clearfix — trik agar container menampung anak yang float:

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

Tips: Untuk layout modern, gunakan Flexbox atau Grid. Float masih berguna untuk membungkus teks di sekitar gambar.

🎭 Analogi sehari-hari

Coba buka majalah cetak. Foto biasanya di pinggir, terus teks mengalir membungkusnya — gak kena foto, tapi nempel rapat di sekelilingnya. Itu efek float versi cetak. Dulu (era 2005-2015) developer pake float buat bikin SELURUH layout web — column, sidebar, grid — pake hack clearfix yang ribet. Sekarang? Float kembali ke fungsi aslinya: membungkus teks di sekitar gambar. Layout modern udah pindah ke Flexbox/Grid yang jauh lebih elegant.

⚠️ Jebakan yang sering ditemui

• Container tidak menampung floating child = container collapse. Pakai clearfix atau display: flow-root (modern, lebih bersih).
• clear: both memaksa elemen pindah ke bawah floating siblings.
• Untuk LAYOUT modern PAKAI Flex/Grid — Float untuk layout = pain.
• Float tidak respect parent height — child float "lepas" dari flow.
• shape-outside untuk wrap teks di sekitar bentuk non-kotak (lingkaran, polygon).
• Float di mobile = sering jadi stack. Kombinasi sulit.

TL;DR: float = elemen ngambang ke left/right, teks mengalir membungkus. Use case asli: text-wrap di sekitar gambar (kayak majalah cetak). JANGAN pakai float buat layout halaman — Flexbox/Grid jauh lebih bersih. clear: both paksa elemen pindah ke bawah float. Container collapse karena float child? Pakai display: flow-root (modern, gantiin clearfix hack lama). shape-outside untuk wrap di bentuk non-kotak.