Float CSS

Bungkus teks di sekitar gambar dan elemen lain.

Pahami konsepnya

Float melepaskan elemen dari aluran normal dan mendorongnya ke satu sisi — kiri atau kanan — lalu isi di sekitarnya (terutama teks) mengalir memenuhi ruang yang tersisa. Empat nilainya: left, right, none (mematikan), dan inherit (mewarisi induk). Efek paling dikenalnya adalah tata letak majalah: gambar di kiri, paragraf menyorok manis di sisiannya.

Sebelum era flexbox dan grid, float dimanfaatkan untuk membangun layout kolom — kini tugas itu sudah diambil alih teknik yang lebih kuat. Tapi untuk tujuan aslinya float tetap juara: membalut gambar dengan teks, quotation yang menjorok, atau elemen kecil yang ingin dikelilingi isi.

Efek samping yang wajib dikenali: elemen induk dari sesuatu yang mengapung bisa "runtuh" karena anaknya tidak lagi menopang tingginya. Solusinya properti clear pada elemen setelahnya (clear: both memaksa turun ke bawah pengapungan), atau teknik modern clearfix. Kenali gejala ini — halaman yang tiba-tiba bertabrakan biasanya sedang menderita float yang belum dibersihkan.

Coba contoh kode

.gambar-postingan {
  float: left;
  width: 240px;
  margin: 0 18px 8px 0;  /* kanan-bawah agar teks tidak menempel */
}

.bawah { clear: both; }

Gambar mengapung kiri dengan margin kanan-bawah sebagai jeda napas teks — itulah seluruh sihir float. Elemen berkelas .bawah memakai clear: both agar memulai baris baru di bawah pengapungan, mencegah induk runtuh. Coba ganti left menjadi right dan rasakan bedanya.

Latihan singkat

Buat artikel dengan gambar mengapung kiri yang dikelilingi dua paragraf, lalu footer yang clear di bawahnya.