CSS float digunakan untuk mengatur posisi elemen dengan memaksa elemen tersebut berada di sebelah kiri atau kanan parent elemennya, sehingga dapat memisahkannya dari normal flow. Float umumnya digunakan untuk membuat galeri gambar, layout berkolom, dan text wrapping. Ada beberapa masalah yang mungkin muncul seperti collapsed container, tetapi dapat diselesaikan dengan menggunakan properti clear.

1. CSS float

2. Float merupakan properti pada CSS untuk mengatur
posisi sebuah elemen. Sebuah elemen dapat dipaksa
untuk berada di sebelah kiri atau kanan dari parent/
pembungkusnya dengan menggunakan properti ini.
https://css-tricks.com/all-about-floats/
“

3. float
none
left
right

4. normal flow
vs.
out-of flow
https://www.w3.org/TR/CSS2/visuren.html

5. yang bisa dilakukan menggunakan properti float
• text wrapping
membuat teks mengelilingi gambar / elemen lain
• image gallery
membuat serangkaian gambar menjadi galeri
• multi-column layout
membuat halaman memiliki beberapa kolom
• dll
dan masih banyak lagi

6. teks wrapping

7. .logo

10. image gallery

15. multi-column layout

19. masalah pada float

20. image gallery
ketika jumlah teks terlalu sedikit,
sehingga tingginya lebih kecil dari
tinggi gambar

21. lebih rendah
dari gambar

22. .container tidak
menganggap gambarnya ada /
mengabaikannya

23. image gallery
ketika masih ada ruang untuk teks /
elemen lain, setelah gambar terakhir

24. teks setelah
gambar terakhir

25. teks mengisi
ruang kosong

26. multi-column layout
ketika kolom-kolom berada
di dalam .container

27. .container

28. .container-nya
collapsed / runtuh,
karena mengabaikan
adanya kolom-kolom
yang diberi float

29. solusi ?

30. clear
left
right
both
berfungsi menghentikan / membersihkan float

31. cara menghentikan / membersihkan float
• menggunakan property overflow
• menggunakan <div> kosong
• menggunakan teknik micro clearfix

32. menggunakan properti overflow

33. menggunakan properti overflow

34. menggunakan <div> kosong
simpan di tempat
dimana kita ingin
memberhentikan
float

35. menggunakan <div> kosong

36. menggunakan teknik micro clearfix
teknik yang dibuat oleh Nicolas Gallagher
http://nicolasgallagher.com/micro-clearfix-hack/
untuk menangani
bug di browser-
browser modern
menghentikan /
membersihkan float
untuk menangani
bug di IE 6/7

37. menggunakan teknik micro clearfix

38. thankyou.
sandhikagalih@unpas.ac.id