Float itu apa? margin kah?

 Sudah ada margin, sudah ada gap, sudah ada padding. Sekarang ada istilah baru FLOAT?!?

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Yuk, belajar bareng Bu Mawar—karena dari satu klik, bisa lahir sejuta ide dan manfaat.

Fungsi float: mengatur posisi elemen agar “mengapung” ke kiri atau kanan dari kontainer, sehingga teks atau elemen lain mengalir di sekitarnya.

Dalam CSS:

float digunakan untuk penataan layout.

Nilai yang umum:

• float: left; → elemen ke kiri, elemen lain mengalir di kanan.

• float: right; → elemen ke kanan, elemen lain mengalir di kiri.

• float: none; → posisi normal (default).

Apung, istilah apa lagi?

Apung maksudnya tidak menempati posisi normal.

Penjelasan analoginya:
Di Word
Di HTML/CSS
Gambar bisa “mengapung” di kiri/kanan teks.
Gunakan float: left; atau float: right;.
Teks menyesuaikan posisi di sekitar gambar.
Elemen lain “mengalir” mengelilingi elemen yang difloat.
Jika ingin gambar tidak dikelilingi teks, pilih :
 “In Line with Text”.
Sama dengan float: none; (posisi normal).

Contoh:
<img src="foto.jpg" style="float:right; width:150px;">
<p>Teks di sisi kiri gambar.</p>

Namun saat diberi float, elemen itu berpindah:
🔹 Contoh visual:
[Gambar]
Teks di bawah gambar.
Teks di sisi kiri [Gambar]
Word: gambar di kanan, teks di kiri.
HTML:Hasilnya sama seperti di Word dengan “Wrap Text → Right”.
Biasanya, elemen HTML tersusun dari atas ke bawah (blok).